pure css select dropdown

Solutions on MaxInterview for pure css select dropdown by the best coders in the world

showing results for - "pure css select dropdown"
Carys
22 Mar 2016
1.css_select {
2  -webkit-appearance: none;                                   
3     -moz-appearance: none;                                   
4          appearance: none;
5  border: 0;
6  outline: 0;
7  font: inherit;
8  width: 20em;
9  height: 3em;
10  padding: 0 4em 0 1em;
11  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);
12  color: #000;
13  border-radius: 0.25em;
14  box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.2);
15  cursor: pointer;
16} 
17.css_select option {                                         
18  color: inherit;
19  background-color: #fff;                                  
20} 
21.css_select:focus {
22  outline: none;
23}
24.css_select select::-ms-expand {
25  display: none;
26}
27
28/*use like this:*/
29<select class="css_select"> 
30	<option>Monday </option>
31    <option>Tuesday</option>
32    <option>Wednesday</option>             
33</select>
34