如何為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];
       }