Menu
I'm trying to set the style of an option in a select dropdown menu in Google Chrome. It works in all browsers except IE9 and Chrome.
option.red { background-color: #cc0000; font-weight: bold; font-size: 12px; color: white; }<select name="color"> <option class="red" value="red">Red</option> <option value="white">White</option> <option value="blue">Blue</option> <option value="green">Green</option> </select>Without using JavaScript, is there a way to set style to the options in Google Chrome? Once selected the background color does not display.
544
You can use inline styles to add custome styling to <option> tags. For eg : <option style="font-weight:bold;color:#09C;">Option 1</option> This will apply the styles to this particular <option> element only. You can also use <option value="" disabled> <br> </option> to add a line-break between the options.
<select> tags can be styled through CSS just like any other HTML element on an HTML page rendered in a browser. Below is an (overly simple) example that will position a select element on the page and render the text of the options in blue.
Example Explained HTML) Use any element to open the dropdown content, e.g. a <span>, or a <button> element. Use a container element (like <div>) to create the dropdown content and add whatever you want inside of it. Wrap a <div> element around the elements to position the dropdown content correctly with CSS.
Unfortunately, WebKit browsers do not support styling of <option> tags yet, except for color and background-color.
The most widely used cross browser solution is to use <ul> / <li> and style them using CSS. Frameworks like Bootstrap do this well.
112
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
