I know how to change the color of the background of the options element, and also the hover.

What I'm trying to do is to change the default browser's color (blue in chrome) when you click over an option element, and while the "select" is still on focus.

I made this pen:

-------------------------------HTML --------------------------------

<select size="3" name='options' multiple>
   <option value='option-1' class="options">Option 1</option>
   <option value='option-2' class="options">Option 2</option>
   <option value='option-3' class="options">Option 3</option>
</select>  

<p>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure suscipit 
   eos hic voluptatibus ratione impedit ullam sequi, delectus rem. Corporis nemo 
</p>

-------------------------------CSS---------------------------------------

select{
 border-radius:.5em;
 width:200px;
 height:100px;
}

::selection {
  background: #ffb7b7;
}

::-moz-selection {
  background: #ffb7b7; 
}

*:focus {
outline: #ffb7b7 solid 5px; 
}

I'd like to make the blue default color a #ffb7b7 like the outline and the text selection.

Thanks in advance!

I know how to change the color of the background of the options element, and also the hover.

What I'm trying to do is to change the default browser's color (blue in chrome) when you click over an option element, and while the "select" is still on focus.

I made this pen:

http://codepen.io/dieggger/pen/QbRZXP

-------------------------------HTML --------------------------------

<select size="3" name='options' multiple>
   <option value='option-1' class="options">Option 1</option>
   <option value='option-2' class="options">Option 2</option>
   <option value='option-3' class="options">Option 3</option>
</select>  

<p>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure suscipit 
   eos hic voluptatibus ratione impedit ullam sequi, delectus rem. Corporis nemo 
</p>

-------------------------------CSS---------------------------------------

select{
 border-radius:.5em;
 width:200px;
 height:100px;
}

::selection {
  background: #ffb7b7;
}

::-moz-selection {
  background: #ffb7b7; 
}

*:focus {
outline: #ffb7b7 solid 5px; 
}

I'd like to make the blue default color a #ffb7b7 like the outline and the text selection.

Thanks in advance!

• javascript
• css
• browser

Share Improve this question Follow asked Aug 19, 2015 at 15:05 Diego MontesDiego Montes 4311 silver badge66 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Ok, I played with your codepen and found this solution :

option:checked {
    box-shadow: 0 0 10px 100px #ffb7b7 inset;
}

I added this code in your CSS. It seems that box-shadow replaces the browser color so it works :) (tested on Firefox, Chrome 44)