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:


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?

Answer 1

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

Answer 2

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...

Answer 3

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.