How to style a select tag's option element?

css google-chrome html-select
Mike picture Mike · May 4, 2011 · Viewed 158.6k times · Source

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.

Without using JavaScript, is there a way to set style to the options in Google Chrome? Once selected the background color does not display.

Answer

Tushar Roy picture Tushar Roy · Jun 20, 2013

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.

Related questions

How to remove focus border (outline) around text/input boxes? (Chrome)

Can anyone explain how to remove the orange or blue border (outline) around text/input boxes? I think it only happens on Chrome to show that the input box is active. Here's the input CSS I'm using: input { background-color: transparent; …

Read More
Hide scroll bar, but while still being able to scroll

I want to be able to scroll through the whole page, but without the scrollbar being shown. In Google Chrome it's: ::-webkit-scrollbar { display: none; } But Mozilla Firefox and Internet Explorer don't seem to work like that. I also tried this …

Read More
Remove blue border from css custom-styled button in Chrome

I'm working on a web page, and I want custom-styled <button> tags. So with CSS, I said: border: none. Now it works perfectly in safari, but in chrome, when I click one of the buttons, it puts an …

Read More