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

0

Asthepreviousphotoshows,Iwouldliketostylizethatlocationthatismarkedinred.

Ihavealreadyputthefollowingcode:

selectoption{background-color:white;border:1pxdashedred;}

background-colorworked,buttheborderattributedidnotwork,andseveralotherattributesdidnotwork,too.I'dliketostylea<select>inawaysimilartoBootstrap's<selectclass="selectpicker"> , but the attributes I put in are not recognized (it seems). Would anyone know why they are not working / being recognized?

Thank you!

    
asked by anonymous 11.09.2017 / 17:52

3 answers

1

As I said, there is a limit to how you can customize SELECT, but for cases like this there is Bootstrap. I recommend a read in their documentation Introduction .

Here is a small example that I modified:

Customizing Select with Bootstrap

To run it you will need the Bootstrap files that are located in the External Resources tab on the site of that link.

    
11.09.2017 / 20:10
0

It is almost impossible to style options free form, each browser understands its stylization 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 to ul´s and li´s after page load, keeping the function of the page in forms.

It can also be done manually with chosen

    
11.09.2017 / 18:46
0

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

To change the border use the outline, not the border.

If you want more freedom, such as changing the option hover, you will have to use some library like select2 or choosen.

Demo

    
11.09.2017 / 18:58