Custom Select with Pure CSS

In this example below you will see how to do a Custom Select with Pure CSS with some HTML / CSS and Javascript

Create a custom select for browsers that support appearance:none. Use :after to insert arrow made from pure CSS or insert a font awesome arrow icon.

Thumbnail
This awesome code was written by nhmaggiej, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright nhmaggiej ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Custom Select with Pure CSS</title>
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="fav_show_wrapper">
<label for="fav_Show" id="fav_show_label">Favorite Show:</label> 
<select name="fav_show" id="fav_show">
  <option value="breaking_bad">Breaking Bad</option>
  <option value="mad_men">Mad Men</option>
  <option value="girls">Girls</option>
  <option value="good_wife">The Good Wife</option>
  <option value="house_of_cards">It's a Brad Brad World</option>
</select>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/nhmaggiej/custom-select-with-pure-css-AawsB */
#fav_show{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  position:relative;
  background:transparent;
  padding:8px;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  zoom: 1;
  *display: inline;
}

#fav_show_wrapper{
  position:relative;   

}

#fav_show_wrapper:after{
  content: "";
  font-family: FontAwesome;
  width: 1px;
  padding: 0px 0 0;
  height: 0px;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  zoom: 1;
  *display: inline;
  border: 5px solid #999;
  background: #F1F1F1;
  border-color: #999 transparent transparent;
  box-shadow: 0px -3px 0 5px #F1F0F0, 0px -3px 0px 6px #999;
  position:relative;
  right:30px;
  top:2px; 
}

Comments