A Pen by Andy Walpole on CodePen.
Last active
August 29, 2015 14:06
-
-
Save TCotton/a49d5706fb2434f23dc9 to your computer and use it in GitHub Desktop.
A Pen by Andy Walpole.
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
<!--[if gte IE 9]><label for="favcity" class="ie9"><![endif]--> | |
<!--[if !IE]><!--><label for="favcity"><!--<![endif]--> | |
<select id="favcity" name="select"> | |
<option value="0">Choose your favorite city</option> | |
<option value="1">Amsterdam</option> | |
<option value="2">Buenos Aires</option> | |
<option value="3">Delhi</option> | |
<option value="4">Hong Kong</option> | |
<option value="5">London</option> | |
</select> | |
</label> |
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
body { | |
padding: 20px; | |
color: #373737; | |
font-size: 62.5%; | |
line-height: 2.0em; | |
} | |
*, *:before, *:after { | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
select { | |
-webkit-appearance: none; | |
-moz-appearance: none; | |
appearance: none; | |
border-radius: 0; | |
} | |
label[for=favcity] { | |
position: relative; | |
display: block; | |
width: 400px; | |
overflow: hidden; | |
cursor: pointer; | |
} | |
label[for=favcity]::after { | |
content: ' '; | |
position: absolute; | |
right: 0; | |
top: 0; | |
width: 40px; | |
height: 100%; | |
display: block; | |
background: #24d7ea url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOBAMAAAGq7RFVAAAAJ1BMVEX///////////////////////////////////////////////////9Ruv0SAAAADHRSTlMACAoREoKDt7y9zc5qtZoyAAAAcklEQVQIHQXBsQnCUAAFwFOCCKbIABaWERzi1yaFAzmEpHYEC8GUKVQEkbyhvOOkZqdWt0/QYKqLzQeF7dv6y/RLwa2wYtk4Xxxe+t8yd1WuM/rcUc2gYHEeoP02umSgTR50ybBPRuiSZAS6ZAQ4jgCAPyjYJiRH4fymAAAAAElFTkSuQmCC') no-repeat center center; | |
pointer-events: none; | |
} | |
label[for=favcity] select { | |
border: 5px solid #eeeeee; | |
background: white; | |
padding: 7px 20px 7px 20px; | |
width: 100%; | |
font-size: 16px; | |
font-family: monospace; | |
cursor: pointer; | |
} | |
label[for=favcity] :-moz-any(select) { | |
width: 110%; | |
} | |
label[for=favcity] select::-ms-expand { | |
display: none; | |
} | |
label[for=favcity].ie9 select { | |
width: 110%; | |
} | |
label[for=favcity] select:focus { | |
outline: 1px dotted #A9A9A9; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment