Home » Blog » Dev notes » Styling select lists in Pure CSS

Styling select lists in Pure CSS

thumbnail

First of all, how does the select list look like? Here’s an example:

<select>
    <option value="Option1"> Option1 </option>
    <option value="Option2"> Option2 </option>
    <option value="Option3"> Option3 </option>
    <option value="Option4"> Option4 </option>
</select>

There is a couple steps, through which you have to pass to style the selects. Let’s start from the beginning: You have to reset the default styles. To do so, you need to set css on your select to ‘remove border’, ‘default webkit’ and ‘mozilla styles’:

select {
    border: 0 !important;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance:none;
}

2. On IE you’ll still have an arrow, so in order to remove the arrow for IE 10, you have to add:

select::-ms-expand {
    display: none;
}

3. Now you need to wrap your select in some kind of container:



<div class="select-container">
    <select>
        <option value="Option1"> Option1 </option>
        <option value="Option2"> Option2 </option>
        <option value="Option3"> Option3 </option>
        <option value="Option4"> Option4 </option>
    </select>
</div>


4. Styles for the container will simply be “position: relative”:

.select-container {
    position: relative;
}
 
select {
    border: 0 !important;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance:none;
}
 
select::-ms-expand {
    display: none;
}

5. Now you can style dimensions of the select:

.select-container {
    position: relative;
}
 
select {
    border: 0 !important;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance:none;
}
 
select::-ms-expand {
    display: none;
}

6. Firefox however, will still add outline while you click on your select list. To remove that, you have to add a bit of style:

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

7. Now you have a selected select list but there is no arrow. To add it, you need to add an element that will be positioned over your select list. That’s why you need to add position relative to your “.select-container”.

Your html structure should look like this:


<div class="select-container">
    <span class="select-arrow"></span>
    <select>
        <option value="Option1"> Option1 </option>
        <option value="Option2"> Option2 </option>
        <option value="Option3"> Option3 </option>
        <option value="Option4"> Option4 </option>
    </select>
</div>

And styles as follows:

.select-arrow {
    background: #FFF url('arrow-image.gif') no-repeat right;
    right:0px;
    top:0px;
    width:30px;
    height:35px;
    position:absolute;
    display:block;
    z-index: 10;
    margin: 0 0 0 0;
    pointer-events:none;
 
}

8. To fix your unclickable arrow, you have to change your span “select-arrow” to SVG. It will look like this:

<div class="select-container">
    <svg class="select-arrow"></svg>
    <select>
        <option value="Option1"> Option1 </option>
        <option value="Option2"> Option2 </option>
        <option value="Option3"> Option3 </option>
        <option value="Option4"> Option4 </option>
    </select>
</div>
.select-container {
    position: relative;
    width: 300px;
}
 
select {
    border: 0 !important;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance:none;
    width: 100%;
    height: 35px;
    line-height: 35px;
    background: #FFF;
    font-size: 14px;
    color: #000;
    text-transform: uppercase;
    outline:none;
    padding-left: 5px;
}
 
select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}
 
select::-ms-expand {
    display: none;
}
 
.select-arrow {
    background: #FFF url('arrow-image.gif') no-repeat right;
    right:0px;
    top:0px;
    width:30px;
    height:35px;
    position:absolute;
    display:block;
    z-index: 10;
    margin: 0 0 0 0;
    pointer-events:none;
}

The end! This solution will work on all modern browsers, on IE10 and IE9. It degrades gracefully on IE 7 and 8. Normal default buttons also show up on these browsers. Easy? Hope you’ll find it useful!

Sharing is caring!

1 Star2 Stars3 Stars4 Stars5 Stars (3 votes, average: 5.00 out of 5)
Loading...

Leave a Reply

Your email address will not be published. Required fields are marked *

*

  1. Benxamin

    This is awesome! The real technique here is in letting the mouse (pointer) events pass through to the underlying select element. Then, your event target is consistently the select element. Thank you!