for any1 using ie8 and dont want to use a plugin i've made something inspired by Rohit Azad and Bacotasan's blog, i just added a span using JS to show the selected value.
the html:
<div class="styled-select">
<select>
<option>Here is the first option</option>
<option>The second option</option>
</select>
<span>Here is the first option</span>
</div>
the css (i used only an arrow for BG but you could put a full image and drop the positioning):
.styled-select div
{
display:inline-block;
border: 1px solid darkgray;
width:100px;
background:url("/Style Library/Nifgashim/Images/drop_arrrow.png") no-repeat 10px 10px;
position:relative;
}
.styled-select div select
{
height: 30px;
width: 100px;
font-size:14px;
font-family:ariel;
-moz-opacity: 0.00;
opacity: .00;
filter: alpha(opacity=00);
}
.styled-select div span
{
position: absolute;
right: 10px;
top: 6px;
z-index: -5;
}
the js:
$(".styled-select select").change(function(e){
$(".styled-select span").html($(".styled-select select").val());
});
you can use jQuery selectbox replacement. It's a jQuery plugin.
http://cssglobe.com/post/8802/custom-styling-of-the-select-elements
The Pure-css http://bavotasan.com/2011/style-select-box-using-only-css/
http://jsfiddle.net/u3cybk2q/2/ check on windows, iOS and Android (iexplorer patch)
.styled-select select {_x000D_
background: transparent;_x000D_
width: 240px;_x000D_
padding: 5px;_x000D_
font-size: 16px;_x000D_
line-height: 1;_x000D_
border: 0;_x000D_
border-radius: 0;_x000D_
height: 34px;_x000D_
-webkit-appearance: none;_x000D_
}_x000D_
.styled-select {_x000D_
width: 240px;_x000D_
height: 34px;_x000D_
overflow: visible;_x000D_
background: url(http://nightly.enyojs.com/latest/lib/moonstone/dist/moonstone/images/caret-black-small-down-icon.png) no-repeat right #FFF;_x000D_
border: 1px solid #ccc;_x000D_
}_x000D_
.styled-select select::-ms-expand {_x000D_
display: none;_x000D_
}
_x000D_
<div class="styled-select">_x000D_
<select>_x000D_
<option>Here is the first option</option>_x000D_
<option>The second option</option>_x000D_
</select>_x000D_
</div>
_x000D_
in Firefox 39 I've found that setting a border to the select element will render the arrow as (2). No border set, will render the arrow as (1). I think it's a bug.
Source: Stackoverflow.com