css arrow box html,html - Select box arrow style - Stack Overflow

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:

Here is the first option

The second option

Here is the first option

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());

});