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

Question

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

如果我有一个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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Gar*_*ers 20

在::before和::after伪元素实际上在前面加上/追加一个子节点的元素,所以这不会是不能包含子节点的任何元素上工作.

它(大致)相当于:

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

Run Code Online (Sandbox Code Playgroud)

如果要更新文本值,则需要使用JavaScript.

伪元素*也可以*影响空元素(在空内容之前或之后插入内容),而`option`元素甚至不是空的. (2认同)

Answer 2

Tim*_*Tim 8

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

请注意，这仅在选项最初可见时才有效（通过设置选择大小属性）。在选择下拉列表中（没有大小），“before”元素不会显示。 (4认同)

Answer 3

j08*_*691 7

看来,现在,你不能.根据W3,"此规范没有完全定义以下的交互:更换元素之前和之后(例如HTML中的IMG)".一些替换元素是<img>标记,插件(<object>标记)和表单元素(<button>,<textarea>,<input>和<select>标记).

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

`:before`对CSS3来说并不陌生 - 但是,`:: before`的双冒号表示法是.寓言我们应该继续使用单冒号表示来保持IE8用户的理智,但我离题了. (3认同)

归档时间：	13 年，10 月前
查看次数：	15664 次
最近记录：	7 年，1 月前