Skip to content

Instantly share code, notes, and snippets.

@joshuabaker

joshuabaker/custom-select.html

Created June 12, 2013 13:20
Show Gist options
  • Save joshuabaker/5765176 to your computer and use it in GitHub Desktop.
Save joshuabaker/5765176 to your computer and use it in GitHub Desktop.
Download ZIP
Works in modern browsers and IE8+. Example: http://jsbin.com/ujovob/1/
Raw
custom-select.html
<!DOCTYPE html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$(function() {
$('.select').each(function() {
var self = $(this),
span = self.children('span'),
slct = self.children('select').change(function() {
span.text(slct.children(':selected').text());
});
});
});
</script>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
body {
margin: 40px;
background: white;
}
.select, .select select, .select span {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0px;
}
.select {
display: inline-block;
position: relative;
}
.select select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
height: 100%;
position: absolute;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
.select span {
display: block;
width: 100%;
height: 100%;
padding: 4px 26px 4px 6px;
background: #eee;
border: 1px solid #888;
}
</style>
</head>
<body>
<div class="select">
<select name="" id="">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
<option value="4">Item 4</option>
<option value="5">Item 5</option>
</select>
<span>Item 1</span>
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment