Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
464 views
in Technique[技术] by (71.8m points)

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

<html>
<head>
    <style>

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

    </style>


</head>
<body>

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


</body>
</html>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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.

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...