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

Question

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

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

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

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;
}

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

Answer 1

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

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

Conceptually, after the element (including its descendants) is rendered into an RGBA offscreen image, the opacity setting specifies how to blend the offscreen rendering into the current composite rendering.

但是，select 元素是替换元素。还有一个replaced element是

An element whose content is outside the scope of the CSS formatting model [...]
The content of replaced elements is not considered in the CSS rendering model.

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