Custom Select with Pure CSS

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.

<!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/ */
#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; 
}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( Custom Select with Pure CSS ) is write by Maggie Jones, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Maggie Jones