Using some jQuery and CSS you can make a cross-browser custom select (dropdown) box.
<div class="select-wrapper">
<select>
<option selected="selected" value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
</div>
.select-wrapper {
position: relative;
width: 215px;
height: 30px;
padding: 0 25px 0 0;
margin: 0;
border: 1px solid #0D5995;
overflow: hidden;
background: url(select-arrow.png) no-repeat right center transparent;
}
select {
position: absolute;
left: 0;
top: 0;
opacity : 0;
width: 240px;
height: 30px;
padding: 5px 0;
border: none;
background: transparent !important;
-webkit-appearance: none;
}
.select-wrapper span {
display: block;
width: 210px;
height: 30px;
line-height: 30px;
padding: 0 0 0 5px;
}
$(document).ready(function() {
$('select').after('<span>' + $('option:selected', this).text() + '</span>');
$('select').click(function(event) {
$(this).siblings('span').remove();
$(this).after('<span>' + $('option:selected', this).text() + '</span>');
});
})
See the demo.
Leave a Reply