Question

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

我要做的是在点击选项元素时更改默认浏览器的颜色（镀铬中的蓝色），然后选择＆＃34;选择＆＃34;仍然是焦点。

我做了这支笔：

------------------------------- 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上测试）

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

1 个答案: