How to style HTML select option hover and selected option effects

Question

I'm trying to remove the default blue background on the HTML select option hover effect and also style the selected option effects with the block of CSS below but it doesn't seem to be working. Ant ideas on how this can be achieved.

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

    }

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

    }

Answer 1

You can't do this, if you want you can use jQuery Chosen or similar http://harvesthq.github.io/chosen/

It generates HTML lists easy to style.

Answer 2

Solution works only in IE (checked 10 and 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

To change the default text colour of blue on a link, use this code:

a {
text-decoration:none;
  }

To change hovering colour, this should work:

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