如何使用 CSS 伪元素 :before{ content: '' } 来影响<option>元素？
[英]How can I use the CSS pseudo-element :before{ content: '' } to affect an <option> element?
问题描述
If I have a list of optons, how can I use the CSS pseudo-element :before{ content: '' } to affect the <option> ?
如果我有一个选项列表，我如何使用 CSS 伪元素 :before{ content: '' } 来影响<option> ？ Below there are three options an I'd like to insert text before each one.下面有三个选项，我想在每个选项之前插入文本。
I know this can be done wit javascript / jQuery, but is it possible with CSS?我知道这可以用 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>
4 个解决方案
解决方案1
22 已采纳 2012-02-08 17:34:03
The ::before and ::after pseudo-elements actually prepend/append a child node to the element, so this will not work on any element that cannot contain child nodes. ::before和::after伪元素实际上将子节点添加到元素::before /附加到元素，因此这不适用于任何不能包含子节点的元素。
It would be (roughly) the equivalent of doing:这将（大致）相当于做：
<option><span>sandy - </span>beach</option>
If you want to update the text value, you will need to use JavaScript.如果要更新文本值，则需要使用 JavaScript。
解决方案2
9 2018-10-25 09:05:09
In 2018, this does work in Chrome, Edge, Firefox, but only if the attribute size is specified with a value greater than 1. Safari lacks support.在 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="">500px</option> <option data-before="">Adjust</option> <option data-before="">Adn</option> <option data-before="">Align-center</option> <option data-before="">Align-justify</option> <option data-before="">Align-left</option> <option data-before="">Align-right</option> </select> </div> <div> <select> <option data-before="">500px</option> <option data-before="">Adjust</option> <option data-before="">Adn</option> <option data-before="">Align-center</option> <option data-before="">Align-justify</option> <option data-before="">Align-left</option> <option data-before="">Align-right</option> </select> </div>
解决方案3
8 2012-02-08 17:32:09
It appears that for now, you can't.现在看来，你不能。 According to the W3 , "This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML)".根据W3 ，“该规范没有完全定义 :before 和 :after 与替换元素（例如 HTML 中的 IMG）的交互”。 Some replaced elements are <img> tags, plugins (<object> tags), and form elements (<button>, <textarea>, <input>, and <select> tags).一些被替换的元素是 <img> 标签、插件（<object> 标签）和表单元素（<button>、<textarea>、<input> 和<select>标签）。
You can however do this with JavaScript.但是，您可以使用 JavaScript 执行此操作。 Oh and BTW, content:, :before, and :after are actually CSS 2.1.哦，顺便说一句，content:、:before 和 :after 实际上是 CSS 2.1。
解决方案4
0 2016-05-12 12:30:25
Testing shows that the only browser which does indeed support generating content with :before (or ::before) on OPTION tags is Firefox.测试表明，唯一确实支持在 OPTION 标签上使用 :before（或 ::before）生成内容的浏览器是 Firefox。 All the other big browser DO NOT accept it;所有其他大浏览器都不接受它； this, as someone stated in the linked other question, is standard compliant, as they DO NOT explicitly state how generated content is to be managed in replaced elements such as OPTION.正如有人在链接的其他问题中所述，这是符合标准的，因为它们没有明确说明如何在替换元素（如 OPTION）中管理生成的内容。
On the other side, in my view the fact that, when generating content with option::before does work, it does not in any case affect the SELECT tag is correct and VERY USEFUL;另一方面，在我看来，当使用 option::before 生成内容确实有效时，它在任何情况下都不会影响 SELECT 标记的正确性和非常有用； the first example that comes to my mind is when you want to show options which are elements of a tree, and so you want to, as to increase UI clarity, indent them based on their level in the tree.我想到的第一个例子是当你想要显示作为树元素的选项时，为了增加 UI 的清晰度，你想要根据它们在树中的级别缩进它们。
In that case, you surely want to do that ONLY when the option is shown in the opened drop down, while the indent would only be a nuisance if shown in the select when the drop down is closed.在这种情况下，您肯定希望仅在打开的下拉菜单中显示选项时才这样做，而缩进只会在下拉菜单关闭时显示在选择中时才令人讨厌。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.