如何为HTML选择选项悬停和选择的选项效果设置样式

Question

我正在尝试删除HTML选择选项悬停效果上的默认蓝色背景，并使用下面的CSS块设置所选选项效果的样式，但这似乎无法正常工作。 蚂蚁关于如何实现的想法。

    select.color-chooser option:hover {
        background-color: none!important;

    }

select.color-chooser option[selected] {
        background-color: none!important;

    }

Answer 1

如果您愿意，可以使用jQuery Chosen或类似的http://harvesthq.github.io/chosen/

它生成易于样式化的HTML列表。

Answer 2

解决方案仅在IE中有效（已选中10和11）

`
    <select class="form-control">
          <option>Option option option</option>
          <option>Option option option</option>
          <option>Option option option</option>
         </select>



          .form-control option:hover {
              background: pink;
            }

            ::selection, select:focus::-ms-value {
              background-color: deeppink;
              color: #000;
            }

            option:checked {
              background-color: deeppink;
              color: #000;
            }

            option:checked:hover, select:focus option:checked:hover {
              background-color: deeppink;
              color: #000;
            }

`

https://jsbin.com/mejivij/2/edit?html,css,js，输出

Answer 3

我还没有尝试过，但是我的头上没有，不是应该选择：选择吗？

select.color-chooser option:selected {}

Answer 4

要更改链接上蓝色的默认文本颜色，请使用以下代码：

a {
text-decoration:none;
  }

要更改悬停颜色，这应该起作用：

a:hover {
   color:[enter colour];
       }