Created
April 6, 2016 09:54
-
-
Save Stevenlitton/7554367a18c15764b378b1df6ca05b71 to your computer and use it in GitHub Desktop.
Custom Dropdown Styles
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
HTML | |
<div class="select-style"> | |
<select> | |
<option value="volvo">Volvo</option> | |
<option value="saab">Saab</option> | |
<option value="mercedes">Mercedes</option> | |
<option value="audi">Audi</option> | |
</select> | |
</div> | |
CSS | |
.select-style { | |
border: 1px solid #ccc; | |
width: 120px; | |
border-radius: 3px; | |
overflow: hidden; | |
background: #fafafa url("img/icon-select.png") no-repeat 90% 50%; | |
} | |
.select-style select { | |
padding: 5px 8px; | |
width: 130%; | |
border: none; | |
box-shadow: none; | |
background: transparent; | |
background-image: none; | |
-webkit-appearance: none; | |
} | |
.select-style select:focus { | |
outline: none; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment