Skip to content

Instantly share code, notes, and snippets.

@samccone

samccone/gist:3018400

Created June 29, 2012 14:47
Show Gist options
  • Save samccone/3018400 to your computer and use it in GitHub Desktop.
Save samccone/3018400 to your computer and use it in GitHub Desktop.
Download ZIP
HTML custom select
Raw
gistfile1.html
<html>
<head>
<style>
.custom_select {
height: 30px;
width: 50px;
border-radius: 3px;
cursor: pointer;
background-image: url("http://i.imgur.com/nNp9D.png");
background-position: center center;
background-repeat: no-repeat;
overflow: hidden;
border: solid 1px #CCC;
}
.custom_select:hover {
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF000000', endColorstr='#FF060606');
background-image: url("http://i.imgur.com/W00R0.png"), -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #000000), color-stop(3%, #2c2c2c), color-stop(27%, #252525), color-stop(80%, #0c0c0c), color-stop(100%, #060606));
background-image: url("http://i.imgur.com/W00R0.png"), -webkit-linear-gradient(top, #000000 0%, #2c2c2c 3%, #252525 27%, #0c0c0c 80%, #060606 100%);
background-image: url("http://i.imgur.com/W00R0.png"), -moz-linear-gradient(top, #000000 0%, #2c2c2c 3%, #252525 27%, #0c0c0c 80%, #060606 100%);
background-image: url("http://i.imgur.com/W00R0.png"), -o-linear-gradient(top, #000000 0%, #2c2c2c 3%, #252525 27%, #0c0c0c 80%, #060606 100%);
background-image: url("http://i.imgur.com/W00R0.png"), -ms-linear-gradient(top, #000000 0%, #2c2c2c 3%, #252525 27%, #0c0c0c 80%, #060606 100%);
background-image: url("http://i.imgur.com/W00R0.png"), linear-gradient(top, #000000 0%, #2c2c2c 3%, #252525 27%, #0c0c0c 80%, #060606 100%);
}
body select {
cursor: pointer;
opacity: 0;
height: 100%;
display: block;
position: relative;
border: solid 1px #ccc;
}
</style>
</head>
<body>
<div class="custom_select">
<select id="select">
<option> foo </option>
<option> bar </option>
</select>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment