Style a Select box using CSS

Question

I have a Select box:

<select name="Topic" autofocus>
<option>Science</option>
<option>Java Programming</option>
<option>Advance Web Programming</option>
</select>

with the following CSS:

select{
    height: 30px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 2px;
    font-size: 16px;
    color: #000000;
    font-weight: 400;
    padding: 4px;
}

This is my output:
enter image description here

The css seems like only affect outside of the select box, but not the inside(dropdown list), how to modify it so that inside will be modified also?

did you try adding css to the option? `select option{background:transparent;}` ? — roullie, Apr 24 '15 at 03:27
I tried `select option{background:transparent;}`, but not working — Newbie, Apr 24 '15 at 03:30
Have you tried specifying a class for option? For example in the html — Marc Rudkowski, Apr 24 '15 at 03:31
I specify a class for option, but also not working @MarcRudkowski — Newbie, Apr 24 '15 at 03:34
it's impossible using just CSS, use a custom dropdown like: http://designwithpc.com/Plugins/ddSlick. — ketan, Apr 24 '15 at 04:00
Styling select options can be a pain if you're just using pure CSS. But here's a great thread you should read: http://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript — Walker Boh, Apr 24 '15 at 04:01
It will work in certain browsers, but not in Chrome for example, I think they should have some reasons, use a custom select, a jQuery plugin for example — Tom Sarduy, Apr 24 '15 at 04:22

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

In some cases you can, but will be not crossbrowser for sure. This element is rendered by the OS, not HTML. It cannot be styled via CSS. There are replacement plug-ins that look like a SELECT, but are actually composed from regular HTML elements that CAN be styled.

From MSDN

Except for background-color and color, style settings applied through the style object for the option element are ignored. In addition, style settings applied directly to individual options override those applied to the containing select element as a whole.

So it will work for some Browsers and versions, but for Chrome will not. I can't find right now the specs.

JS Solution

Most of the plugins out there convert <select> elements to <ol> and <option> elements into to <li>, so that you can style it with CSS. You could write your own, but I'm sure there are good stuff out there.

Two options

Chosen - 7k+ watchers on github
Select2 - inspired by Chosen

score 0 · Answer 2 · answered Apr 11 '16 at 08:45

I have created the design for it using Jquery and Css. Kindly check it out

Jquery :

$(document).ready(function(){
    selectbox();
});

function selectbox(se)
{
    $("select").each(function(){
        /*var topHeight=$(this).parent(".custom_select").height();*/
        var select=$(this);
        $(this).wrap("<div class='custom_select'></span>");
        $(this).parent().append("<span class='selectValue' style='display: inline-block;'><span class='emptyselect'></span><span class='selectedValue'></span><span class='arrow'></span></span>");
        // var attrName=$(this).attr('name');
        // var attrId=$(this).attr('id');
        // $(this).siblings(".selectValue").children(".selectedValue").attr('name',attrName);
        // $(this).siblings(".selectValue").children(".selectedValue").attr('id',attrId);
        $(this).each(function() {
          $.each(this.attributes, function() {
            // this.attributes is not a plain object, but an array
            // of attribute nodes, which contain both the name and value
            if(this.specified) {
              if(this.name!='class')
              {
                $(select).siblings(".selectValue").children(".selectedValue").attr(this.name, this.value);
              }
            }
          });
        });

        $(this).children("option").each(function(){
            if($(this).attr("selected")=='selected')
            {
                var defaultValue=$(this).text();
                //console.log(defaultValue);
                $(this).parent("select").siblings(".selectValue").children(".selectedValue").text(defaultValue);
            }
        });
        $(this).change(function(){
            var optionValue=$(this).val();
            //console.log(optionValue);
            $(this).siblings(".selectValue").siblings(".selectedValue").text(optionValue);
        });
        $(this).parent().append("<ul class='listValue'></ul>");
        $(this).children("option").each(function(){
            var data=$(this).text();
            $(this).parent('select').parent('.custom_select').children('.listValue').append("<li>"+data+"</li>");           
        });
        $(this).siblings(".listValue").children("li").each(function(){
            $("body").click(function(){
                $(this).parent('.listValue').parent('.custom_select').children(".selectValue").siblings(".listValue").hide();   
            });
            $(this).click(function(){
                var getText=$(this).text();
                $(this).parent('.listValue').parent('.custom_select').children('.selectValue').children('.selectedValue').text(getText);
                $(this).parent('.listValue').parent('.custom_select').children('select').attr('value',getText);
                $(this).parent('.listValue').parent('.custom_select').children(".selectValue").siblings(".listValue").hide();
                $(this).parent('.listValue').parent('.custom_select').children('select').children('option').each(function(){
                    if($(this).text()==getText)
                    {
                        $(this).attr("selected","selected")
                    }
                    else
                    {
                        $(this).removeAttr("selected")                      
                    }
                });
            });
        });
        var span=$(this).parent().children(".selectValue");
        var spanHeight=span.height();
        var spanHeight=spanHeight/2;
        span.children(".selectedValue").css('line-height',spanHeight+'px');
    });
    $(".listValue").hide();
    $(".custom_select").each(function(){
        $(this).children(".selectValue").click(function(){
            $(this).siblings("select").change();
            $(this).siblings(".listValue").toggle();            
        });
    });
    $(document).click(function(se) { 
        if(($(se.target).attr('class')!='selectValue') && ($(se.target).attr('class')!='selectedValue') && ($(se.target).attr('class')!='arrow'))
        {
            $(".listValue").hide();
        }
    });
}

CSS:

/********Custom Select************/
.custom_select{position: relative;}
.custom_select .listValue{position: absolute;width: 100%;background: #fff;color: #545a61;font-size:20px;z-index: 2;padding: 0;margin: 0;border: 1px solid rgba(0,0,0,0.2);box-shadow: none;max-height: 150px;overflow: auto;}
.custom_select .listValue li{width: 100%;height: 25px;list-style-type: none;padding: 0 0 0 10px;font-weight: normal;  cursor: pointer;font-size:15px;color: #545a61;}
.custom_select .listValue li:hover {background:#d5d9e5;}
.custom_select .selectValue{display: inline-block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;background: #fff;border: 1px solid #dbdbdb;text-align: left;font-size: 0}
.custom_select .selectValue .emptyselect{display: inline-block;height: 100%;vertical-align: middle;}
.custom_select .selectValue .arrow{position: absolute;right: 11px;top: 50%;margin-top: -3.5px;border-left: 7px solid transparent;border-right: 7px solid transparent;border-bottom: 0px solid transparent;border-top: 7px solid #000;line-height: normal;}
.custom_select .selectValue .selectedValue{font-size: 20px;color: #666;font-weight: 500;padding-top: 6px;display: inline-block;padding: 12px 7px 10px 14px;letter-spacing: 0.05em;vertical-align: middle;}
.custom_select select{position: relative;z-index: -2;}
/********Custom Select************/

Design Is not that good you can design it yourself. Just try it...

userlond · Answer 3 · 2015-04-24T03:59:38.913

-1

Native browsers' selectboxes have too restricted abilities of styling. So the idea is to hide native selectbox and emulate its behavior with some other html-element(s).

Try some libs like selectBoxIt which do it this way.

edited Apr 24 '15 at 03:59

answered Apr 24 '15 at 03:34

userlond

3,456
2
31
49

Style a Select box using CSS

3 Answers3

JS Solution

Two options