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

Styling select lists in Pure CSS

thumbnail

How do I style a selection dropdown in CSS?

First of all, let’s check how the select box list looks like? Here’s an example of a pure CSS select box:

How to make a custom select box in 8 steps?

If you need to make a custom select box in pure CSS here is a simple instruction. There are a couple of steps you need to go through to style the select boxes. Let’s start from the beginning:

  1. 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 className="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 an 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 a position relative to your “.select-container”. For this example, the arrow is added through Font Awesome CDN. Put a link to head section of your website

Your HTML structure should look like this:

Head:

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

Body:

<div className="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>

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 href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

Body HTML:

<div className="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>

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!

+1 (3 votes, average: 5.00 out of 1)
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!