Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
different style for option in select
- Thread starter ellasso
- Start date
theboyhope
IS-IT--Management
Yes, it is. You'd just need to apply different styles to the option tags.
Well, it probably ought to be possible like this:
[tt]
<select name="test">
<option style="font-weight: bold">Bold</option>
<option style="font-style: italic">Italic</option>
<option style="color: red">Red</option>
</select>
[/tt]
However, browsers don't treat this as you'd expect...
IE6 ignores the bold & italic styles, but does change the colour.
NS7 applies each of the styles to the options when they appear in the drop-down list, but none of them to the actual selected value.
I don't know if either of the above is "correct" behaviour (both seem wrong to me), but that's not really the issue anyway. You'll just have to experiment with different settings and different browsers and see what works for you.
Incidentally, if I was going to do this on my site I wouldn't hard-code the style= attributes as I've done above. I'd create a class called HighlightOption (or similar) in my stylesheet with suitable properties and apply it to the options I wanted to mark out.
That way I could easily tweak its value to respond to changing browser behaviour, or even sniff out what browser the surfer's using and change the properties of the style accordingly.
-- Chris Hunt
[tt]
<select name="test">
<option style="font-weight: bold">Bold</option>
<option style="font-style: italic">Italic</option>
<option style="color: red">Red</option>
</select>
[/tt]
However, browsers don't treat this as you'd expect...
IE6 ignores the bold & italic styles, but does change the colour.
NS7 applies each of the styles to the options when they appear in the drop-down list, but none of them to the actual selected value.
I don't know if either of the above is "correct" behaviour (both seem wrong to me), but that's not really the issue anyway. You'll just have to experiment with different settings and different browsers and see what works for you.
Incidentally, if I was going to do this on my site I wouldn't hard-code the style= attributes as I've done above. I'd create a class called HighlightOption (or similar) in my stylesheet with suitable properties and apply it to the options I wanted to mark out.
That way I could easily tweak its value to respond to changing browser behaviour, or even sniff out what browser the surfer's using and change the properties of the style accordingly.
-- Chris Hunt
- Status
Similar threads
- Locked
- Question
- Locked
- Question
- Locked
- Question
