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