Skip to content

Instantly share code, notes, and snippets.

@cubiq

cubiq/select-reset.html

Created May 27, 2014 12:12
Show Gist options
  • Save cubiq/29d30429e663b17e3a80 to your computer and use it in GitHub Desktop.
Save cubiq/29d30429e663b17e3a80 to your computer and use it in GitHub Desktop.
Download ZIP
How to reset a select tag
Raw
select-reset.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Styled Select</title>
</head>
<style>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* SELECT reset starts here ============================================== */
.styled-select {
position: relative;
}
.styled-select:after {
position: absolute;
z-index: 1;
content: '\25be'; /* you probably want to use an icon font */
pointer-events: none;
}
.styled-select select {
font: inherit;
background-color: transparent;
padding: 0;
margin: 0;
border: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
z-index: 2;
}
.styled-select select:focus {
outline: 0;
z-index: 1;
}
.styled-select select::-ms-expand {
display: none;
}
@-moz-document url-prefix() {
.styled-select select {
text-indent: 0.01px;
text-overflow: '';
}
.styled-select select:focus {
color: transparent;
text-shadow: 0 0 0 #fff;
}
}
/* reset ends here ============================================== */
/* Here comes the styling */
.styled-select {
font-family: sans-serif;
font-size: 16px;
display: inline-block;
background: #32B1C7;
border-radius: 5px;
box-shadow: inset 0 -2px 0 1px rgba(0,0,0,0.2);
}
.styled-select select {
color: #fff;
height: 40px;
padding: 10px 40px 10px 10px;
box-shadow: inset 0 20px rgba(255,255,255,0.3);
text-shadow: 0 1px rgba(0,0,0,0.4);
}
.styled-select select:focus {
background: #E88138;
border-radius: 5px;
box-shadow: inset 0 -2px 0 1px rgba(0,0,0,0.2), inset 0 20px rgba(255,255,255,0.3);
}
.styled-select:after {
color: #fff;
right: 0;
top: 0;
height: 37px;
width: 28px;
line-height: 40px;
text-align: center;
font-weight: bold;
box-shadow: -1px 0 0 rgba(0,0,0,0.1);
border-left: 1px solid rgba(255,255,255,0.3);
text-shadow: 0 1px rgba(0,0,0,0.4);
margin-right: 1px;
}
</style>
<body>
<label><select>
<option>Select one</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select></label>
<label class="styled-select"><select>
<option>Select one</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select></label>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment