Select, Option and dropdown image problem

[ehsan85]

Hello everybody,
Having a problem with "Select" .
I have creaded an from, Original design is like the 1st attachment

Then I converted it to HTML But only mozill firefox can show same as my design. But other browser can show like 2nd attachment

My HTML code was:

<div class="field"><label>Vehicle Condition</label><div class="selectWrapOuter"><div class="selectWrapInner"><select name="vehical"><option>Select</option>
                      <option>Good</option>
                      <option>Ok</option>
                      <option>Damaged</option>
                      <option>Wrecked</option>
                    </select></div></div></div>

And CSS code was:

.selectWrapOuter{
	background:url('img/select-bg.png') no-repeat;
	background-repeat:no-repeat;
	border:1px solid white;
	height:18px;
	float:left;
	-moz-box-shadow: 1px 1px 1px #666;
	-webkit-box-shadow: 1px 1px 1px #666;*/
	box-shadow: 1px 1px 1px #666;
	-moz-border-radius: 5px; /* FF1+ */
  	-webkit-border-radius: 5px; /* Saf3-4, iOS 1+, Android 1.5+ */
	border-radius: 5px; /* Opera 10.5, IE9, Saf5, Chrome, FF4 */
}
.selectWrapInner{
	overflow:hidden;
	width:165px;
}
select{
	background:transparent;
	border:none;
	width:188px;
	text-align:center;
}
select option{
	background-color:#ffee7a;
}

Is it Possible with CSS, or If Javascript is better for this Please help me about javascript code.

regards
ehsan

[fjober]

Hello

I have done something like this before, check here please

but actually I had two problems:

1. not compatible with IE 6.0
2. it requires a lot of XHTML tags

to make it I have two div and select
1. the first div as a container
2. the other one is inside with select
3. both of the select and the inside div position is absolute
4. the select element is over the div
5. the select element opacity is 0

you are permitted to take the code if you like it

regards

Feras Jobeir