Selecting checked element in CSS

Question

I have an issue about selecting element inside the dropdown. Here is the fiddle: http://jsfiddle.net/H656H/

<select id="razred" name="razred">
            <option hidden selected><?php echo $razred; ?></option>
            <option>1.A</option>
            <option>1.B</option>
            <option>1.C</option>
            <option>1.Č</option>
            <option>1.D</option>
            <option>1.E</option>
            <option>2.A</option>
            <option>2.B</option>
            <option>2.C</option>
            <option>2.Č</option>
            <option>2.D</option>
            <option>2.E</option>
            <option>3.A</option>
            <option>3.B</option>
            <option>3.C</option>
            <option>3.Č</option>
            <option>3.D</option>
            <option>3.E</option>
            <option>4.A</option>
            <option>4.B</option>
            <option>4.C</option>
            <option>4.Č</option>
            <option>4.D</option>
            <option>4.E</option>
        </select><br />

So, I want to style the element after the user clicks it. So, only when user select an his selection receives a styling. I think there has to be some kind of CSS pseudo-selector for this selected element inside dropdown. Are there any CSS selectors for that?

Thank you all!

What element are you trying to style? – Lloyd Banks Nov 27 '13 at 19:14 — Lloyd Banks, Nov 27 '13 at 19:14
Elements inside `#razred` dropdown. Actually all with ` – scandir Nov 27 '13 at 19:22 — scandir, Nov 27 '13 at 19:22

score 0 · Answer 1 · edited May 23 '17 at 10:25

0

Edit: removed incorrect part of answer.

The answer to your actual question regarding css:

From a previous question

#razred option:checked { color: red; }

edited May 23 '17 at 10:25

Community

1
1

answered Nov 27 '13 at 19:13

echochamber

1,835
1
15
18

There's nothing wrong with the OP's markup. If no value is provided, the content inside the option tag is sent with the form submission. – cimmanon Nov 27 '13 at 19:19
@cimmanon Oh, didn't know that. Thanks. Edited to only show correct part of answer :). – echochamber Nov 27 '13 at 19:20

score 0 · Answer 2 · answered Nov 27 '13 at 19:38

0

The focus selector will do something that's close to what you are looking for

#razred:focus{
    color: blue;
}

Updated fiddle

answered Nov 27 '13 at 19:38

Lloyd Banks

35,740
58
156
248

walmik · Accepted Answer · 2013-11-27T19:47:43.213

There is no pseudo selector for marking select boxes the way you imagine. So the answer to your original question is No :(

But if you dont mind using a tiny bit of JavaScript then you can emulate the feature you desire. You can add a class to the select box's onchange method. Ideally this should be done from the bottom of the page inside a script tag. I m doing it inline only as a demo:

<select id="razred" name="razred" onchange='this.className="visited"'>

And then you could just define the custom class the way you want

.visited {
    color: #f00;
    -webkit-appearance: none;  /*required for webkit based browsers*/
}

JSFiddle: http://jsfiddle.net/9K5h2/1

Selecting checked element in CSS

3 Answers3