在选择元素中选择选项元素时更改浏览器的蓝色默认颜色

Question

我知道如何更改选项元素的背景颜色以及悬停的颜色。

我想做的是，当您单击选项元素时，并且“选择”仍然处于焦点状态时，更改默认浏览器的颜色（chrome 中的蓝色）。

我做了这支笔：

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; 
}

我想将蓝色默认颜色设置为#ffb7b7，就像轮廓和文本选择一样。

提前致谢！

Answer 1

好的，我玩了你的 codepen 并找到了这个解决方案：

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

我在你的 CSS 中添加了这段代码。看来 box-shadow 取代了浏览器颜色，因此它可以工作:)（在 Firefox、Chrome 44 上测试）