Styling option elements of a select input element.

Having problems in IE applying class names to option elements. Works

Page 1 of 1

3 Replies - 5597 Views - Last Post: 21 January 2010 - 09:26 AM

#1 tommiller85  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 15
  • Joined: 25-September 09

Styling option elements of a select input element.

Posted 21 January 2010 - 06:08 AM

I'm hoping somebody can help me as I'm far from being a HTML/CSS guru.

I'm having problems with the following:

I'm building a hierarchy within a DropDownList (select input). Some of the elements need to stand out from the rest so I've iterated through the collection of option elements and appended a class name to the ones in question. This renders fine in Firefox but not IE 8.

I've checked some online tutorials which set a class name on the actual select element, which is fine if all options are to look the same, but not in my scenario.

Can somebody tell me if this is possible? I'm using IE 8 - not in compatability mode.

Cheers,

Tom.

Is This A Good Question/Topic? 0
  • +

Replies To: Styling option elements of a select input element.

#2 BenignDesign  Icon User is offline

  • holy shitin shishkebobs
  • member icon




Reputation: 6180
  • View blog
  • Posts: 10,683
  • Joined: 28-September 07

Re: Styling option elements of a select input element.

Posted 21 January 2010 - 07:37 AM

Would you mind showing us the code in question? It is often easier to diagnose and suggest solutions for a problem if we can actually see the problem. Thank you for helping us help you!
Was This Post Helpful? 0
  • +
  • -

#3 tommiller85  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 15
  • Joined: 25-September 09

Re: Styling option elements of a select input element.

Posted 21 January 2010 - 08:36 AM

View PostBenignDesign, on 21 Jan, 2010 - 06:37 AM, said:

Would you mind showing us the code in question? It is often easier to diagnose and suggest solutions for a problem if we can actually see the problem. Thank you for helping us help you!


Well the code isn't really relevant. All I wanted to know is if I should be able to apply a class to an option element. An example below. Instead of using a CSS class i've applied the style to the option element using the style attribute. This works as expected in Firefox but not IE 8.0 (non quirks mode).

<select name="DropDownBoxReassignTo"
 id="DropDownBoxReassignTo" tabindex="4" style="float:right;">
	<option value=""></option>
	<option value="" style="font-weight:bold;">To be bold</option>
	<option value="" style="font-weight:bold;">
---------also bold--------</option>
	<option value="1">some normal text</option>
	<option value="2">some normal text</option>
	<option value="3">some normal text</option>
	<option value="7">some normal text</option>
	<option value="8">some normal text</option>
	<option value="9">some normal text</option>
 
</select>


Was This Post Helpful? 0
  • +
  • -

#4 BenignDesign  Icon User is offline

  • holy shitin shishkebobs
  • member icon




Reputation: 6180
  • View blog
  • Posts: 10,683
  • Joined: 28-September 07

Re: Styling option elements of a select input element.

Posted 21 January 2010 - 09:26 AM

A quick Google search has yielded quite a number of inquiries all over the 'net regarding bold text in option boxes being non-functional in IE. However, changing the text color DOES work. This may be something for you to implement.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1