How To Apply Italics On First Option Tag

I need to apply half of text in non-italics and the other half in italics. I need to do something like this: I have tried the code below but nothing seems to be working... is anyo

Solution 1:

If you want to style the contents of the select based on the selected option, you can't do that with just CSS.

Here's a duplicate question about that:

• Style <select> element based on selected <option>

If you're asking about the placeholder text, then that's different again. You might need to post a snippet that includes how placeholder text is set and/or target platforms.

If you just want to style the first option in the dropdown list, then you can do that with just css by either:

1. Remove the asterisk (*), and the i selector from your code, and it will work. (I've removed the explicit <i> tags, as I assumed that's not what you want).

#mySelect.firstOption {
  font-style: italic;
}

<selectid="mySelect"><optionclass="firstOption">alpha</option><option>beta</option><option>gamma</option></select>

2. You can also achieve this using the :first-child selector on the option element:

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

<selectid="mySelect"><option>alpha</option><option>beta</option><option>gamma</option></select>