style for the selected item in a select element in css - html

Question

I tried to style the select element.
I do this:
option {
font-size: medium;
font-weight: bold;
margin-left: 30px;
font-family: "Comic Sans MS", cursive, sans-serif;
color: aliceblue;
}
After the user choose one of the option, I want the same style.
but this is return to the basic atyle/ what can I do to save the style to the selected one?
Here is the jsfiddle

Answer 1

select {
font-size: medium;
font-weight: bold;
font-family: "Comic Sans MS", cursive, sans-serif;
color: aliceblue;
}

Answer 2

Your question is not very clear as to what you aim to accomplish, but it's likely you want to achieve the following effect:
document.getElementsByTagName("select")[0].onchange = function() {
this.classList.add("selected");
};
select,
option {
font-size: medium;
font-weight: bold;
font-family: "Comic Sans MS", cursive, sans-serif;
}
select.selected,
option {
color: red;
}
<select>
<option>one</option>
<option>two</option>
<option>three</option>
<option>four</option>
<option>five</option>
<option>six</option>
</select>