4

enter image description here

I looked up this post on Stackoverflow forum.

How to style the <option> with only CSS?

Many people claimed that this is not possible to achieve in CSS and there are a number of cross-browser compatibility issues.

I tried to code my css for the above attached image(circled in red) using the following.

.hovercard-container .dropdownfield select option{
  background-color: #BDBEC1;
  border: 1px solid #000;
}

But this doesnt work in Safari/Chrome/IE. Only works in Firefox.

Does anybody can the CSS styling still be achieved on dropdown for select option tags? If not, are there any other methods that would allow me to style just like the image above?

Community
  • 1
  • 1
awongCM
  • 917
  • 5
  • 22
  • 46

1 Answers1

1

It's not possible to achieves this with the same styling and effects cross-browser. Some browsers may offer more styling that the other, but that's not a solution.

I suggest using jQuery plugings such as https://plugins.jquery.com/select2/ or https://plugins.jquery.com/chosen/ - they turn your ordinary <SELECT> control into styled beauty.

Yuriy Galanter
  • 38,833
  • 15
  • 69
  • 136
  • Thanks Yuriry. That's really such a shame! I wish the W3C community could come up with a way to address this issue rather using several 'workaround' approaches people see fit... I will check those two recommended plugins and see what I may find. Cheers! – awongCM Feb 10 '14 at 01:19