Answers for "pure css select dropdown"

pure css select dropdown

.css_select {
  -webkit-appearance: none;                                   
     -moz-appearance: none;                                   
          appearance: none;
  border: 0;
  outline: 0;
  font: inherit;
  width: 20em;
  height: 3em;
  padding: 0 4em 0 1em;
  background: url(https://upload.wikimedia.org/wikipedia/commons/9/9d/Caret_down_font_awesome_whitevariation.svg) no-repeat right 0.8em center/1.4em, linear-gradient(to left, rgba(85, 70, 140, .5) 3em, rgba(85, 70, 140, 0.2) 3em);
  color: #000;
  border-radius: 0.25em;
  box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.2);
  cursor: pointer;
} 
.css_select option {                                         
  color: inherit;
  background-color: #fff;                                  
} 
.css_select:focus {
  outline: none;
}
.css_select select::-ms-expand {
  display: none;
}

/*use like this:*/
<select class="css_select"> 
	<option>Monday </option>
    <option>Tuesday</option>
    <option>Wednesday</option>             
</select>