Styling selected option [duplicate]

Question

Pretty self explaining, I need to style the option that is selected by the user. Is this possible without javascript?

Simple example:

HTML:

<select multiple>
    <option class="opt1" value="">Option 1</option>
    <option class="opt2" value="">Option 2</option>
</select>

CSS:

.opt1[selected]{
    background-color: red;
}
.opt2{
    background-color: green;
}

JS Fiddle Example

Answer 1

try this .

.your-select option:checked {
    background:#333;padding:20px;width:100px;border:3px solid #F00
}

<select multiple class="your-select">
    <option class="opt1" value="">Option 1</option>
    <option class="opt2" value="">Option 2</option>
 </select>