Question

如何将CSS'内容'添加到'option'标记中？我想实现例如：“名称：沃尔沃”。

<html>
<head>
<style>
  option:before {
    content: "Name: ";
  }
</style>
</head>
<body>
  <select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select>
</body>
</html>

Answer 1

不幸的是，伪元素不适用于图像，输入，选择选项。

一个选项是将select inside和div包装起来并使用:before内容

<body>
  <div>
  <select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select>
  </div>
</body>

CSS：

div::before{
  content:"Name: "
}

https://codepen.io/nagasai/pen/PRwreg

其他选项是使用javascript或jQuery添加内容“Name：”

如何将CSS'content'属性与'option'标签一起使用？

1 个答案: