CODEWITHSUNDEEP
css
Sankar
Sankar

Reputation: 11

Styling select tag

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.

Upvotes: 1

Views: 16244

Answers (5)

Ernesto
Ernesto

Reputation: 1592

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

Upvotes: 0

ncubica
ncubica

Reputation: 8465

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

Upvotes: 3

NicolaPasqui
NicolaPasqui

Reputation: 1120

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/

Upvotes: 1

Alex
Alex

Reputation: 7374

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

Upvotes: 2

user428071
user428071

Reputation:

is this the sort of thing your after?

select:hover { background-color: red; }

Upvotes: 0

Related Questions