2 Attachment(s)
Select, Option and dropdown image problem
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:
HTML Code:
<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:
Code:
.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
Re: Select, Option and dropdown image problem
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 :D
regards :)
Feras Jobeir