html - 什么时候允许在选项元素上设置伪元素的样式？

Question

我正在尝试将伪元素与 <option> 结合使用元素。但是，我观察到使用不同浏览器进行渲染时存在一些差异。

所以我的问题是，什么时候允许使用像::before这样的伪元素？ , ::after和 ::first-letter用<option>元素？

---

上下文

假设我有三个选项元素，

<select>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

我想使用 ::before 在某些元素前后添加一些内容和 ::after选择器。因此，我将向其中一个元素添加一个 CSS 类“special”，并像这样添加一个 CSS 规则，

.special::before {
  content: " Before - ";
}

.special::after {
  content: " - After ";
}

<select>
  <option value="1" class="special">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

它不适用于任何浏览器。但是，现在如果我简单地修改 select允许多个选择的元素，伪元素将在 Chrome、Firefox 和 Edge 中工作，但仍然不能在 IE 11 中。

.special::before {
  content: " Before - ";
}

.special::after {
  content: " - After ";
}

<select multiple>
  <option value="1" class="special">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

我可以应用不同的样式，例如颜色、字体系列、字体大小，甚至可以在这些伪元素上显示!

.special::before {
  content: " Before - ";
  color: red;
  font-size: 15px;
}

.special::after {
  content: " - After ";
  font-family: Consolas, Arial, Verdana;
  display: block;
  color: blue;
}

<select multiple>
  <option value="1" class="special">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

---

但是，发现该行为与 Chrome、Firefox 和 Edge 也不完全一致。

例如，在 Chrome 中，如果我使用 ::first-letter伪元素，它适用于 select 下的选项元素元素，但不在 optgroup 下元素。但是，它在 Firefox 和 Edge 上都能正常工作。

.special::first-letter {
  color: red;
  font-size: 20px;
}

select {
  height: 100px;
}

<select multiple>
  <option value="1" class="special">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select multiple>
  <optgroup label="Item 1">
    <option value="1" class="special">One</option>
  </optgroup>
  <optgroup label="Other items">
    <option value="2">Two</option>
    <option value="3">Three</option>
  </optgroup>
</select>

注意:当在 datalist 中使用选项元素时，这些都不起作用元素。但我现在不关心那个。我有 some examples here如果你想看的话。

---

经过搜索，我发现 <option> element is considered a replaced element only in certain cases .但是，我无法在网上找到任何关于何时允许使用伪元素的文档。

Answer 1

如果您正在寻找基于标准的答案，简短的回答是 CSS 目前不支持将伪元素与表单元素一起使用，无论是 ::before/::after，或其他伪元素，例如 ::first-letter。因此，每个浏览器都各行其是，几乎没有互操作性。

如前所述，大多数伪元素与表单元素和/或替换内容之间的交互没有规范。任何规范中对此的唯一声明是在 css-content-3 中。 ，它说:

Note: Replaced elements do not have ::before or ::after pseudo-elements; the content property replaces their entire contents.

但情况变得更糟:严格来说，表单元素与被替换的内容不是一回事(尽管很多人，包括我在内，经常持相反的说法)，即使它们的行为非常相似。表单元素恰好具有特定于平台的布局规则，阻止它们完全可以使用 CSS 设置样式。它们可能支持一些常见的 CSS 属性并在某种程度上遵循盒子模型，但它们有一些限制，使您无法将它们完全视为常规的、不可替换的元素。这确实是他们与替换内容的唯一共同点。

最重要的是，任何当前的 CSS 规范都没有涵盖表单元素的呈现。正在努力尝试并在css-ui-4 中控制这一切，但我没有屏住呼吸。