How to style the select box or remove default down arrow button from the select box and style it

In this post we are going to use twitter bootstrap to create a select box and learn how to remove the default styling of it including the default down arrow button of the select box and style the whole thing as we want.

Normally we get our select box like the image bellow with bootstrap. Which looks odd and is a bit difficult to style. Although it does not matter whether you are working with any css framework or not the principles of styling the select box remains the same.

We get this select box using the html bellow. We are using the default bootstrap css here.

            
    
        Please Select a Category
        Category A
        Category B
        Category C
        Category D
        Category E
    

Note that we do not want to change the default bootstrap.css too much. We just want to make the select box look a bit better.

Here, the class "form-control" applies all the css that creates that rounded cornered border and the inner shadow around the select box.

Step one - we need to create a parent div and style that as a select box.

So, we create a parent div and give it the "form-control" class. Check the line two and three bellow.

    
        
        
            Please Select a Category
            Category A
            Category B
            Category C
            Category D
            Category E
        
    

The Output -

 
Here, the newly created parent div with "form-control" - class acts as a fake select box.

In Second Step, we make sure that the real (not the fake parent) select box looses it's border and the down arrow button.

The CSS:

select.select  {
    padding: 0px 6px;
    width: 100%;
    border: none;
    box-shadow: none;
    background-color: transparent;
    background-image: none;

    -webkit-appearance: none;    // removes borders and downarrow button of the select box from webkit browsers.
    -moz-appearance: none;  // cannot remove the downarrow button of the mozilla browsers.
    appearance: none;

    text-indent: 0.01px; 
    text-overflow: '';  // with text-indent this overflow empty string removes the down arrow of the mozilla browsers.
}

select.select:focus  {
    outline: none;
} 

Please do not miss the code comments above. I have shown how to remove the default down arrow button from the select box there [from both the mozilla and webkit browsers].
The result -

Finally, we add an absolutely positioned css down arrow in the select box.

The Css:

.form-group {
    position:relative;
}

.form-control:after {
    top: 50%;
    left: 90%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(0, 0, 0, 0);
    border-top-color: #a4a4a4;
    border-width: 5px;
    margin-top: -2px;
    z-index: 100;
}

Final Result -

Note that we have added this css into our style.css that overrides the bootstrap.css.

This way we do not require to change the original bootstrap css.