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.

Answer 1

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…)

Answer 2

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;
}

Answer 3

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.

Answer 4

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

Answer 5

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

Answer 6

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.