How to style HTML select option hover and selected

问题:

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;

    }

回答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.

回答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

回答3:

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

select.color-chooser option:selected {}

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