I'm having this problem where I need to change the color of a/multiple option element(s) when clicked/ selected. Default color is blue when clicked, I believe we should have a solution for this now since I've try to search for solutions but to no avail. Hoping to do this in CSS or vanilla JS. no libraries or frameworks.
Asked
Active
Viewed 9,718 times
1 Answers
19
select[multiple]:focus option:checked {
background: red linear-gradient(0deg, red 0%, red 100%);
}
<select multiple>
<option value="1">one</option>
<option value="2" selected>two</option>
<option value="3">three</option>
</select>

Ashutosh Kolambkar
- 342
- 2
- 11
-
1Nice! What is the os/browser/device support like for this? – TheBlackBenzKid May 31 '18 at 07:16
-
1Plus, any explanation why this seems to need `background: red linear-gradient(0deg, red 0%, red 100%)`? (`background: red` only doesn’t seem to do the trick, at least in Chrome.) – CBroe May 31 '18 at 07:19
-
2Actually, you only need `background-image: linear-gradient(0deg, red 0%, red 100%);`. You can't change the background color because it is set by the browser with `!important`. But setting background image works. – Sơn Trần-Nguyễn Sep 27 '19 at 14:33
-
2Is there a way to change text color of selected item and the background color when out of focus? – Morlas Aug 17 '20 at 10:25