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.
Asked
Active
Viewed 1,652 times
1
-
[Does this help?](https://stackoverflow.com/a/16345225/16234808) – Nov 18 '21 at 03:14
-
Really trying to avoid using jquery... – Kaladin Nov 18 '21 at 03:16
-
Sometimes, you just can't, but good luck :) – Nov 18 '21 at 03:17
-
If you look in the jsFiddle for that answer, it does exactly what I said it does. After selecting an element, the border of select turns a darker color. – Kaladin Nov 18 '21 at 03:19
1 Answers
2
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>
Peneh
- 195
- 1
- 10