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

【问题标题】：How to style HTML select option hover and selected option effects如何设置 HTML 选择选项悬停和选定选项效果的样式
【发布时间】：2019-01-09 17:57:27
【问题描述】：

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

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

    }

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

    }

【问题讨论】：

很好的参考bavotasan.com/2011/style-select-box-using-only-css
How to style the <option> with only CSS?的可能重复

标签： javascript jquery css sass css-selectors

【解决方案1】：

你不能这样做，如果你愿意，你可以使用 jQuery Chosen 或类似的http://harvesthq.github.io/chosen/

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

【讨论】：

【解决方案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,output

【讨论】：

【解决方案3】：

我还没有尝试过，但我想不到，不应该是 option:selected 吗？

select.color-chooser option:selected {}

【讨论】：

【解决方案4】：

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

a {
text-decoration:none;
  }

要更改悬停颜色，这应该可以：

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

【讨论】：