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

I haven't tried this but off the top of my head, shouldn't it be option:selected?

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];
       }