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

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