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

如何将CSS"内容"添加到"选项"标签中？我想实现例如："名称：沃尔沃"。

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

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

一种选择是将选择包装在内部和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：">

相关内容

最新更新

热门标签：