List Box Style in a particular item (option) HTML

Question

I'm trying to make this behavior.

When a have a listBox (or comboBox), my first element (something like "choose one") should have a particular style.

With this (test) code:

<style type="text/css">
 .testX {font-style: italic;}
</style>

(...)

<select name="name" id="id">

<option class="testeX" selected="selected" value="#">
    <p class="testX">Choose One</p>
</option>
<option value="TestValue">
    TestValue
</option>

i can see this behavior on Firefox (but not in Chrome) when i expand my listBox but when i select my 'Choose one' my field doesn't have the (italic) style.

How can i do this? Is possible do this only with HTML, CSS or i need more (like jQuery)?

Thanks.

Reinder Wit · Answer 1 · 2012-09-17T11:51:45.263

2

try using the pseudo element 'first-child'

 <style type="text/css">
       select#id option:first-child {font-style: italic;}
 </style>

And paragraph tags do not belong inside <option> tags, they should contain plain text.

But styling on <option> tags is limited, not all browsers support it. You might have more luck with other types of styling, like background colours. Or use javascript and custom HTML to simulate the same behaviour as a regular <select> box

edited Sep 17 '12 at 11:51

answered Sep 17 '12 at 11:39

Reinder Wit

6,490
1
25
36

1

Who can i use this? It didn't work? I try this code: select#testX option:first-child {font-style: italic;} – JMarques Sep 17 '12 at 11:47
there's no select element with an ID 'testX', you should use select#id option:first-child (btw, I've updated my answer, not all is supported) – Reinder Wit Sep 17 '12 at 11:54

score 2 · Answer 2 · answered Sep 17 '12 at 11:40

Form elements are notoriously difficult to style and many are nigh-impossible to get consistent across browsers and OSs. My approach has always been to hide the form element using javascript (usually jQuery) and construct something similar using divs and spans. That way the sky's the limit when it comes to styling.

You need to ask yourself if it's 100% necessary to have that different style though; deviating from standard form elements isn't great usability.

score 2 · Answer 3 · answered Sep 17 '12 at 11:46

As of HTML4, an OPTION may only contain PCDATA, that is plain character data without any child-elements. The characters will be parsed (e.g. entities).

http://www.w3.org/TR/html401/interact/forms.html#edef-OPTION

As of HTML5, only text-content is allowed inside an OPTION.

http://dev.w3.org/html5/spec/the-option-element.html

In other words, you are using invalid HTML, that is hardly to be parsed by any browser. In fact I didn't know of a single browser, that is capable of displaying HTML elements inside an OPTION-tag. (…until I read this question…)

score 1 · Answer 4 · edited May 21 '14 at 03:48

1

Use this CSS

select { font-style: italic;   }

select option  {
  font-style: normal;  
}

select option:first-child {
  font-style: italic;  
}

Example jsFiddle
But unfortunately this style is applied only on Firefox

edited May 21 '14 at 03:48

joker

982
9
23

answered Sep 17 '12 at 11:41

Fabrizio Calderan

120,726
26
164
177

With this code it works more or less... it works when i expand me listBox but when i select any of element, the appear in italic style (and i want only the first element as italic). Can you help? – JMarques Sep 17 '12 at 11:50
if you just remove the first css rule you get the effect, but you won't see the italic text until you open the select – Fabrizio Calderan Sep 17 '12 at 11:54
option:first-child is not supported in chrome and opera – Web Designer cum Promoter Sep 17 '12 at 14:06

andyb · Answer 5 · 2012-09-17T11:57:39.070

As others have already pointed out, the mark-up is invalid and getting native form controls consistent across browsers is on the scale somewhere between very difficult to impossible.

In my opinion you are correct in thinking that JavaScript solution is probably the least effort and safest approach if you don't mind the page weight overhead of including one or more libraries and/or plugins and are happy with the non-JS fallback of the <select> not looking so pretty.

Of the many <select> replacement jQuery plugins available, I highly recommend the Select 2 plugin. It has a rich feature set which already supports adding placeholder text to the control that you can style accordingly.

score 1 · Accepted Answer · edited May 14 '18 at 07:45

italic is not apply in chrome and opera. plz check http://www.electrictoolbox.com/style-select-optgroup-options-css/

we can give any design for options.

<select name="name" id="id">
    <option style='font-style: italic; font-weight:bold;' selected="selected" value="#">
        <span>Choose One</span>
    </option>
    <optgroup label="Option group 1">
        <option value="TestValue">    TestValue</option>
        <option value="TestValue">    TestValue</option>
        <option value="TestValue">    TestValue</option>
    </optgroup>
</select>

css:

select option {
    background: none repeat scroll 0 0 #E5E3E3;
    border: 1px dotted #CCCCCC;
    height: 15px;
    line-height: 15px;
    text-indent: 3px;
    text-transform: capitalize;
    z-index: -9999; 
}
optgroup { /* Change font style and text alignment */
    font-style:italic;
    text-align:right;
}

score 0 · Answer 7 · answered Sep 17 '12 at 11:36

0

Not all browsers support HTML tags within <option> tags.

answered Sep 17 '12 at 11:36

keaukraine

5,315
29
54

he ask solution for that not a reason – Web Designer cum Promoter Sep 17 '12 at 14:05

List Box Style in a particular item (option) HTML

7 Answers7

Linked