CSS on combobox and listbox

  

Hi, i would like to know how to change the background color by default on mouse hover of a combobox and of a listbox. It's possible? Thanks!

Hi Rui,

Do you want to change background color of a combobox and listbox on mouse hover?

Hi,
How can I do to change the background color of a combobox and listbox on mouse hover?

Thanks!

Yes Suraj, but only 1 option at time

Hi Rui,

For combo box, you can add css as follow.

Add CSS class from css of your page and assign that class to combo box.

You can do same for list box as well.

Hope this helps.

Thanks,

Suraj Borade

Thanks Suraj , but what I want is to change the background of each option and not all the combobox.

Hi Rui,

You can follow Suraj's response but you need to take CSS samples out there to achieve your goal. Although as per checking, I don't think you can have a different background for each of the items in your combobox. Unless someone knows better.

Cheers,

JC

Hi Rui,

I am checking how this can be done.

Hi Rui,

I think it's unclear to us what you want exactly. Do you have multiple combo boxes, and you want to highlight (i.e. change the background colour of) the one the mouse is over? In that case, use the CSS Suraj showed you (using a CSS :hover selector). If you mean highlighting each option of a combobox dropdown list, I'm not sure what you mean, as that's already the default behaviour of a combo box.

Hi all,

what i want is to highlight each option on mouse hover, the default it's blue and i want onother color.

Hi Rui,

Ok, I understand now. Unfortunately, what you want is not possible. At least Webkit browsers (Chrome, Safari) do not support much styling of <option> tags (just color and background-color), but more importantly, ignore :hover. So if you really, really, really must have a different colour, you need to create a control yourself (e.g. by using a <ul>).

Thanks kilian,

can you explain me how to do it?

Solution

Google for "CSS dropdown" (without the quoute), and you'll find many examples, e.g. here.

Solution

Thank you all.