Question

应用于<select>的不透明度不适用于作为子元素的<option>，为什么？

此功能允许自定义下拉列表在不同平台上看起来一致，但同时保留选项的本机行为。 Example one，example two。

我想知道这种行为有多可靠。它是标准还是技巧？

＆＃13;

select {
  opacity: 0;
  border: none;
  height: 24px;
  display: block;
  margin-top: -24px;
  border: 1px solid red;
  width: 100%;
}
div {
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
}
span {
  display: block;
  padding: 0 10px;
  line-height: 24px;
}

＆＃13;

<div>
  <span>Click me</span>
  <select>
    <option>Opt 1</option>
    <option>Opt 2</option>
    <option>Opt 3</option>
  </select>
</div>

＆＃13;

Answer 1

根据我对规范的理解，这不可靠。

§3.2. Transparency: the ‘opacity’ property说opacity也会影响元素的内容（强调我的）：

从概念上讲，在元素（包括其后代）之后渲染到RGBA屏幕外图像，不透明度设置指定如何将屏幕外渲染混合到当前复合中渲染。

但是，select元素是替换元素。而replaced element是

其内容超出CSS格式范围的元素   模特[...]
  替换元素的内容未考虑在内   CSS渲染模型。

因此，opacity可能不会影响替换元素的内容。但它也可能会影响它。

Answer 2

这是您的浏览器的默认行为，只有<select>才能影响您的行为。但您可以使用自定义选择框，其中一个是jQuery UI Selectmenu。

但请记住，移动设备已针对<select>元素进行了优化，并且使用jQuery插件可能看起来不像预期的那样。但是，当您想要自定义选择选项时，这是一个良好的开端。

为什么应用于选择的不透明度不适用于选项？

2 个答案: