How to change the style of a <select> after an option has been selected?

November 18, 2021

I have tried: active, focus, focus-within, target, hover, visited, focus-visible and none of them work. I want the select border to look the same. Currently it seems to get a larger border until something else is clicked.

>Solution :

Try

select[data-chosen]

select[data-chosen] {outline-offset:2px;outline:12px solid;}
select[data-chosen='opt1'] {outline:none;}
select[data-chosen='opt2'] {outline-color:green;}
select[data-chosen='opt3'] {outline-color:red;}
select[data-chosen='opt4'] {outline-color:steelblue;}
select[data-chosen='opt5'] {outline-color:orange;}

<select onchange=" this.dataset.chosen = this.value; ">
    <option value="opt1"> I have no outline.            </option>
    <option value="opt2"> Make it green!                </option>
    <option value="opt3"> Why not red instead!          </option>
    <option value="opt4"> No, steelblue! It's so cool!  </option>
    <option value="opt5"> Okay, orange. It's final.     </option>
</select>