HTML <select> <option> 如何设置点击/选择颜色？

问题描述

大家好。我有一个问题，它可能只与 Firefox 相关，但是，当焦点在 内外时，如何更改所选 的颜色？我不是说 :hover 效果很好，我是说当您单击 时，然后单击 对象外时。

目的是在 处于焦点或未处于焦点时更改所选 的背景颜色/颜色。在 Firefox 中，它在 Windows 系统中显示为带有虚线轮廓的蓝色/白色，而在 Chrome 中则在焦点上以浅蓝色/白色显示，在失焦时以白色/灰色显示......我不想要那样。

CSS

.select_style{
   background-color: #555;
}
.select_style option{
  background-color: #ccc;
}
.select_style option:hover{
  background-color: #0f0;
}

HTML

<select class="select_style" size='3' multiple='multiple'>
  <option value="">Please choose</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
</select>

解决方法

这就是诀窍，记住代码使用了一个“选择框”，它的属性是multiple，它不能作为普通的“下拉列表”。

CSS

option:checked{
    background: #00ff00 !important;
    box-shadow: 0 0 10px 100px #00ff00 inset;
}