Member Avatar for kiraniru

HI I am having Drop dwon box with different font size drop down items... My code is working fine with Firefox but not working properly with IE can some body help me :)

My Code :

<body>
<select name="">
<option selectd style="font-size:35px">option Black</option>
<option style="color: red; font-family : ariel; font-size : 10pt">option Red</option>
<option style="color: blue; font-family : ariel; font-size : 14pt">option Blue</option>
<option style="color: green; font-family : ariel; font-size : 16pt">option Green</option>
<option style="color: yellow; font-family : ariel; font-size : 20pt">option Yellow</option>
<option style="color: #cccccc; font-family : ariel; font-size : 24pt">option Grey</option>
</select>
</body>

Thanks
Irayya

  • 7 Contributors
  • 6 Replies
  • 132 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by Ken Sharpe

Dani AI

Generated

Quick summary and immediate fixes: was right to flag the misspelled selected attribute, and correctly noted the font name typo. Fix those first. Even after those fixes, Internet Explorer often will not honor per-<option> font-size or complex styling — that is a browser/OS rendering limitation rather than a single bug in your HTML or CSS. ’s follow-up that “it still doesn’t work in IE” is expected; and pointed out the broader cross-browser limits on form controls.

Why this happens: many browsers (especially older IEs) use native OS widgets to draw select boxes and options, so style rules on individual <option> elements are ignored or only partially supported. See the browser notes for the element and general guidance on styling form controls: MDN: select element and MDN: Styling web forms.

Practical, reliable approaches:

  • Apply font-family/size to the select itself (browsers usually let the select control inherit those values even if they ignore per-option styles). For example:
.my-select {
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #333;
}
  • Use screen-friendly units (px or em) rather than pt.
  • Test with a standards DOCTYPE and in the specific IE versions you target; quirks mode changes behavior.

If you truly need different visual styles per choice, replace the native control with an accessible custom widget (keyboard support, ARIA roles, and screen-reader testing are required) or use a mature library such as Select2 or the jQuery UI selectmenu. That gives consistent, stylable UI across browsers but adds development and accessibility work.

Recommended Answers

All 6 Replies

Member Avatar for MidiMagic

The property "selectd" is spelled wrong, and should be selected="selected" .

Member Avatar for sreein1986

The property "selectd" is spelled wrong, and should be selected="selected" .

if selected spelling writes correctly then it's not working in IExplore
I think font size not working in IExplore

Member Avatar for Dannyo329

Is ariel a font? I've only heard of arial.

Member Avatar for sushilchandu

if writes total are rightly its not working IExplore

Member Avatar for casper_wang

IE is full of bugs when it comes to css. There are many things that work well with FF and not at all (or at least requiring a hack) for IE.

Hover is one
<li> is another (the tribute used in drop down menu's)

Member Avatar for Ken Sharpe

More than just IE not implementing things, you should be aware that form elements in particular (like drop down lists), have very different support across many browsers. You will not be able to style them all exactly the same no matter how hard you try, so you should design with that limitation in mind.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.