Help with dropdown menu code

I have a drop down menu on one of my sites and I want certain options to be larger and in bold to serve as headings within the drop down list.

The code I have looks like this:

Code:

---

<select name="Hcity" id="Hcity">
<option value="" selected>All Cities</option>
<option value='Cairo'  style='font-weight: bold; font-size: 127%; font-style: italic;'>Cairo</option>
<option value='6' >6th of October</option>
<option value='7' >Agouza</option>
<option value='8' >Al Rehab</option>
<option value='85' >Beaulac</option>
</select>

---

This works perfectly fine in Firefox, but IE and Chrome seem to ignore the style of the Cairo option completely.

Anyone know how I can have it working in all browsers?

Thanks

Use CSS and assign the class to desired option. by the way, try using pixels it's better than relative measures (which is rendered differently in each browsers).

Quote:

---

Originally Posted by Aziz

Use CSS and assign the class to desired option. by the way, try using pixels it's better than relative measures (which is rendered differently in each browsers).

---

^^ I wouldn't recommend that (for text at least).

Using a fixed size for text means that if someone uses their browser to enlarge/decrease the size of the text then they cannot. This is obviously a major accessibility issue if the user cannot change the text size in their browser.

Even though some browsers now use a "zoom" feature instead of increasing the size of all the text, they still have the option to use text only zoom, and there are those browsers that only increase/decrease the size of text using their zoom feature.

For text it's best to use a flexible size (% or em are what people tend to use)

Quote:

---

Originally Posted by Aziz

Use CSS and assign the class to desired option. by the way, try using pixels it's better than relative measures (which is rendered differently in each browsers).

---

Thanks Aziz, but using CSS allows me to style how all the options in the <select> element will look like, not individual options.

Can you please give me a quick example of how you would style the individual option using CSS?

CSS

Code:

---


.highlight {
  font-size:16px;
  font-weight:bold;
  font-style:italic;
}

---

HTML

Code:

---

<select name="Hcity" id="Hcity">
  <option value="" selected>All Cities</option>
  <option value='Cairo' class="highlight">Cairo</option>
  <option value='6' >6th of October</option>
  <option value='7' >Agouza</option>
  <option value='8' >Al Rehab</option>
  <option value='85' >Beaulac</option>
</select>

---

Thanks Aziz... I applied your example and now the styling is done with CSS.

But again it looks great in FF, while IE and Chrome completely ignore the <option> styling :confused:

can you upload a preview please?

Quote:

---

Originally Posted by Aziz

can you upload a preview please?

---

You can check it out here, it's the drop down at the top.

http://www.totallyegypt.com

The only styling that carries through in all browsers is the background colour. The size and weight are ignored by IE and Chrome.

try adding "!important" after each property.

example:
font-size:127% !important;

otherwise, maybe the browsers simply do not support the defined property for options. (I never really tried it).

Quote:

---

Originally Posted by Aziz

try adding "!important" after each property.

example:
font-size:127% !important;

otherwise, maybe the browsers simply do not support the defined property for options. (I never really tried it).

---

Gave that a shot but still didn't work. Looks like they just don't support it like you said.

Well thanks for the help anyways, much appreciated :)