JSFiddle: http://jsfiddle.net/jnelsonin/NMq75/
This is how the select element looks in FireFox and Internet Explorer 10, after giving a background image.
How to get rid of the browser default arrow image?
HTML
|
1 2 3 4 5 6 7 8 |
<div class="ui-select"> <select> <option>Mozilla Firefox</option> <option>Google Chrome</option> <option>Apple Safari</option> <option>Internet Explorer</option> </select> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
.ui-select{width: 100%} /* For Microsoft IE */ select::-ms-expand { display: none; } /* For Webkit based browsers Firefox version 29 and less, Google Chrome, Apple Safari */ select{ -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* For Firefox version 30 and above */ @-moz-document url-prefix(){ .ui-select{ border: 1px solid #CCC; border-radius: 4px; box-sizing: border-box; position: relative; overflow: hidden; } .ui-select select{ width: 110%; background-position: right 30px center; border: none; } } |