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

Posted 2023-03-29

【中文标题】什么时候允许在选项元素上设置伪元素的样式？

【英文标题】：When is it allowed to style pseudo elements on an option element?

【发布时间】：2018-09-19 13:23:33

【问题描述】：

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

所以我的问题是，什么时候允许使用带有<option> 元素的::before、::after 和::first-letter 等伪元素？

---

上下文

假设我有三个选项元素，

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

我想使用::before 和::after 选择器在某些元素之前和之后添加一些内容。所以我将向其中一个元素添加一个“特殊”的 CSS 类，并像这样添加一个 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>

note ：如果在datalist元素中使用选项元素时，任何此操作都没有。但我目前并不关心这一点。我有some examples here，如果你想看的话。

---

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

【问题讨论】：

这可能需要在各种浏览器上进行广泛的研究和测试，因为每个浏览器都以不同的方式实现 option 元素，并且对“被替换的元素没有 ::before 或 ::after 有不同的解释伪元素”（css-content-3），甚至没有任何关于其他伪元素和替换内容之间的交互的规范。话虽如此，如果您正在寻找基于标准的答案，简短的回答是“CSS 当前不支持/没有将伪元素与表单元素一起使用的互操作。”

@BoltClock 我问的是标准允许什么，而不是不同浏览器会发生什么。 every browser implements the option element differently and has a different interpretation of ... 你的意思是说这在规格中没有记录吗？我自己找不到，但我想我可能会遗漏一些东西。

【参考方案1】：

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

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

注意：被替换的元素没有 ::before 或 ::after 伪元素； content 属性替换了它们的全部内容。

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

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