Question

如果我有一个optons列表，我如何使用CSS伪元素：{content：''}之前影响<option>？下面有三个选项，我想在每个选项之前插入文本。

我知道这可以用javascript / jQuery完成，但是CSS可以吗？

<html>
<head>
    <style>

        option::before {
            content: "sandy - "
        }

    </style>


</head>
<body>

<select>
    <option>beach</option>
    <option>field</option>
    <option>carpet</option>
</select>


</body>
</html>

Answer 1

::before和::after伪元素实际上是将子节点添加/附加到元素，因此这不适用于任何不能包含子节点的元素。

它（大致）相当于：

<option><span>sandy - </span>beach</option>

如果您想更新文本值，则需要使用JavaScript。

Answer 2

现在看来，你不能。根据{{3}}，“此规范没有完全定义：替换元素之前和之后的交互（例如HTML中的IMG）”。一些被替换的元素是＆lt; img＆gt;标签，插件（＆lt; object＆gt;标签）和表单元素（＆lt; button＆gt;，＆lt; textarea＆gt;，＆lt; input＆gt;和＆lt; select＆gt; 标签）。

但是，您可以使用JavaScript执行此操作。哦和BTW，内容：，：之前和之后实际上是CSS 2.1。

Answer 3

在2018年，这确实适用于Chrome，Edge，Firefox，但仅当属性size的值指定为大于1时。Safari缺乏支持。

select {
  width: 300px;
  cursor: pointer;
  
  font: 11pt Helvetica;
  
  outline: 0;
}

  select option {
    padding: 8px;
    
     font: 11pt Helvetica;
     
     vertical-align: middle;
  }

  select option::before {
      font-family: FontAwesome, sans-serif;
      font-size: 16px;
      content: attr(data-before);

      margin-right: 8px;
  }
 
div + div {
  margin-top: 20px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>

<div>
  <select size="4">
    <option data-before="&#xf26e">500px</option>
    <option data-before="&#xf042">Adjust</option>
    <option data-before="&#xf170">Adn</option>
    <option data-before="&#xf037">Align-center</option>
    <option data-before="&#xf039">Align-justify</option>
    <option data-before="&#xf036">Align-left</option>
    <option data-before="&#xf038">Align-right</option>
  </select>
</div>

<div>
  <select>
    <option data-before="&#xf26e">500px</option>
    <option data-before="&#xf042">Adjust</option>
    <option data-before="&#xf170">Adn</option>
    <option data-before="&#xf037">Align-center</option>
    <option data-before="&#xf039">Align-justify</option>
    <option data-before="&#xf036">Align-left</option>
    <option data-before="&#xf038">Align-right</option>
  </select>
</div>

如何使用CSS伪元素：在{content：''}之前影响<option>元素？</option>

3 个答案: