Styling select tag - css

Question

i wanted to know if i can change the background color of the of hovering option using css only. I am not bothered about browser compatibility. But give me a solution that works across most browser.

Answer 1

I think the best solution first is to know that you DON'T have to expect that you page look the same in all browser. A good clean solution is use the power of each browser to do this. for example build a css for chrome/safari, another for IE and a last one for Firefox, you can do it as the follow example:
and I think use JAVASCRIPT for this purpose is NOT the best solution.
for web-kit safari/chrome
select{
-webkit-appearance: button;
-webkit-border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-webkit-padding-end: 20px;
-webkit-padding-start: 2px;
-webkit-user-select: none;
background-image: url(../img/forms/arrow_blue.png),
-webkit-linear-gradient(#E1E1E1, #FFF 30%, #FFF);
background-position: center right;
background-repeat: no-repeat;
border: 1px solid #CCC;
color: #999;
font-size: 90%;
font-family:Comfortaa, Arial, Helvetica, sans-serif;
margin: 0;
overflow: hidden;
padding-top: 2px;
padding-bottom: 2px;
text-overflow: ellipsis;
white-space: nowrap;
height:40px;
}
For firefox:
#-moz-document url-prefix() {
select{
border-radius: 5px;
background-image: url(../img/forms/arrow_blue.png),
background-position: center right;
background-repeat: no-repeat;
border: 1px solid #CCC;
color: #999;
font-size: 90%;
font-family:Comfortaa, Arial, Helvetica, sans-serif;
margin: 0;
height:auto;
padding:10px;
}
}
And you can target each IE in each version as example
<!-- cause not every body is pretty -->
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="frontend/css/ie8-and-down.css" />
<![endif]-->
select{ border:1px solid #EEE;
width:auto !important;
height:35px !important;
padding:5px !important;
margin:5px !important;
line-height:1 !important;
}
I thinks in this way you will have nice dropdowns in all browser, while only safari/Chrome will be look exactly as you like, the other ones will behave as the user expect and you will not have to use javascript

Answer 2

Hmmm... you can use the :hover pseudo class to change the background-color of a select element but I just tried:
option:hover {
background-color: #F00;
}
with no result. However:
select:hover option {
background-color: #F00;
}
will change the background color of options when you hover of the select menu but as far as I can tell using option:hover itself won't work

Answer 3

The select tag depends on the OS you're on,
and you can't style it the way you want
the best solution is to use jquery to replace the select with a styled list (editable with css)
take a look:
http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/

Answer 4

is this the sort of thing your after?
select:hover { background-color: red; }

Answer 5

I know this is an old question, but since I had tryed to implement this in the past and although I came to the conclusion that is not worth it most of the time, I realize sometimes it really affects the design idea (i'm not a designer but they get very frustrated about details like that), I thought I would share a resource I found that actually suggests ways to work around the fact that it is very difficult (if not impossible) to get a consistent enough look and feel by just applying css to the tag. Hope it helps somebody.
The html select tag styling challenge