0

I have HTML select box with multiple selection. When I select item/s and lose focus on the control - the background color of the selected items is gray and I would like to change it to some other color. I can change the background of the selected items but it only works the select box is focused and my goal is to change the color when not on focus. Here is an example in JSFiddle - notice by default the gray background:

  [1]: http://jsfiddle.net/w76gLox5/
George Findulov
  • 769
  • 6
  • 16

2 Answers2

0

i updated your fiddle - this does not work in every browser:

http://jsfiddle.net/w76gLox5/1/

select option:checked,
select option:hover {
  background-color: green;
}

and this is also a duplicate of

CSS :selected pseudo class similar to :checked, but for <select> elements

Community
  • 1
  • 1
messerbill
  • 5,499
  • 1
  • 27
  • 38
  • Hi, thanks for your reply, but it's not what I'm looking for. I want to change the default gray background when my select element is not on focus. – George Findulov Oct 23 '15 at 12:31
  • this is exactly what i posted ;) there is also a `:focus` css attribute - https://css-tricks.com/almanac/selectors/f/focus/ ; check the links i posted – messerbill Oct 23 '15 at 12:38
0

You can use linear gradient property also with the background

select option:checked{ background: #1aab8e -webkit-linear-gradient(bottom, #1aab8e 0%, #1aab8e 100%); }

Vikash Gupta
  • 101
  • 1
  • 8