上下文

假设我有三个选项元素，

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

注意：在datalist元素中使用option元素时，这一切都不起作用。但我现在并不关心这一点。我有some examples here，以防您希望看到。

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

Answer 1

简短的回答，如果您正在寻找基于标准的答案，那么CSS当前不支持使用带有表单元素的伪元素，无论是::before / ::after还是其他伪元素，如::first-letter。结果，每个浏览器都有自己的东西，几乎没有互操作。

如上所述，大多数伪元素和表单元素之间的交互和/或替换内容没有规范。任何规范中唯一的声明都在css-content-3中，其中包含：

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

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

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

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

上下文

1 个答案: