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"> Option 1 </option>
    <option value="Option2"> Option 2 </option>
    <option value="Option3"> Option 3 </option>
    <option value="Option4"> Option 4 </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;
    -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"> Option 1 </option>
        <option value="Option2"> Option 2 </option>
        <option value="Option3"> Option 3 </option>
        <option value="Option4"> Option 4 </option>
    </select>
</div>


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

.select-container {
    position: relative;
}
 
select {
    border: 0;
    -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;
    -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”. For this example arrow is added through Font Awesome CDN. Put link to head section of your website

Your html structure should look like this:

Head:


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></link>

Body:


<div class="select-container">
    <span class="select-arrow fa fa-chevron-down"></span>
    <select>
        <option value="Option1"> Option 1 </option>
        <option value="Option2"> Option 2 </option>
        <option value="Option3"> Option 3 </option>
        <option value="Option4"> Option 4 </option>
    </select>
</div>

And styles as follows:

.select-arrow {
    color: #333;
    right:0px;
    top: 10px;
    width:30px;
    position:absolute;
    display:block;
    z-index: 10;
    margin: 0 0 0 0;
    pointer-events:none;
 
}

8. You can add own styles to the select:

select {
    border: 2px solid #eee;
    border-radius: 10px;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance:none;
    width: 100%;
    height: 35px;
    line-height: 35px;
    background: #FFF;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    text-transform: uppercase;
    outline:none;
    padding-left: 15px;
    box-shadow: 3px 3px 30px #eee;
    transition: 0.2s;
}

select:focus, select:hover {
  box-shadow: 3px 3px 10px #eee
}

9. All code should look like this:

Head HTML:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></link>

Body HTML:

<div class="select-container">
    <span class="select-arrow fa fa-chevron-down"></span>
    <select>
        <option value="Option1"> Option 1 </option>
        <option value="Option2"> Option 2 </option>
        <option value="Option3"> Option 3 </option>
        <option value="Option4"> Option 4 </option>
    </select>
</div>

CSS:

.select-container {
    position: relative;
    width: 170px;
}
  
select {
    border: 2px solid #eee;
    border-radius: 10px;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance:none;
    width: 100%;
    height: 35px;
    line-height: 35px;
    background: #FFF;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    text-transform: uppercase;
    outline:none;
    padding-left: 15px;
    box-shadow: 3px 3px 30px #eee;
    transition: 0.2s;
}

select:focus, select:hover {
  box-shadow: 3px 3px 10px #eee
}
  
select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}
  
select::-ms-expand {
    display: none;
}
  
.select-arrow {
    color: #333;
    right:0px;
    top: 10px;
    width:30px;
    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!