How to style the field where the options of a tag select are?

Question

As the previous photo shows, I would like to style that spot that is marked in red.

I’ve already put the following code:

select option {
    background-color: white;
    border: 1px dashed red;
}

The background-color worked, but the attribute border did not work and several other attributes also did not work. I’d like to style one <select> in a similar way to the <select class="selectpicker"> Bootstrap, but the attributes I put are not recognized (it seems). Would anyone know why they are not working/being recognized?

Thank you!

Answer 1

As stated there is a limit to how far you can customize SELECT, but for cases like this there is Bootstrap. Recommendation of a read in their documentation Introduction.

Here’s a small example I’ve modified:

Customizing Select with Bootstrap

To run you will need the Bootstrap files found in the tab External Resources on the website of that link.

Answer 2

It’s almost impossible to style options free form, each browser understands its styling differently, in addition it accepts few style properties, the solution adopted by UI frameworks like...

mdBooststrap select menus

Jquery UI select menus

It is the replacement of selects for ul´s and li´s after page loading, keeping the function of the page in forms.

Can also be done manually with Chosen

Answer 3

There are many limitations with select stylization, however you can play with the properties.

To change the border use Outline, not border.

If you want to have more freedom, like changing the option Hover, you’ll have to use some library like Select2 or choosen.

Demo