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,output

Answer 3

我还没有尝试过这个，但是我不应该选择它：

select.color-chooser option:selected {}

Answer 4

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

a {
text-decoration:none;
  }

要更改悬停颜色，这应该有效：

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

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

4 个答案: