0

I have not found a solution for styling the selected option inside a <select> tag.

Example:

<select class="cursor-pointer min-w-[160px] custom-black rounded-sm border border-[#d6dce2] focus:outline-none focus:ring-0 focus:border-[#d6dce2] font-bold px-4 text-sm py-2.5">
  <option selected disabled hidden>Edit status</option>
  <option value="1">Status1</option>
  <option value="2">Status2</option>
  <option value="3">Status3</option>
  <option value="4">Status4</option>
</select>

I'm trying to change the font-style to italic only for "Edit status" option.

The problem is that when I apply 'italic' to the <select> tag, it applies it for all options. Select tag

Adding italic just to this option does not work at all.

Maybe it's possible using jQuery?

Ed Lucas
  • 5,955
  • 4
  • 30
  • 42
Vsevolod
  • 3
  • 4

1 Answers1

0

Short Answer:

I am not well versed in jQuery, perhaps someone can help you there, but the short answer is there is no way of styling select options.

Long(er) Answer:

<option> elements are styled by your OS -not the browser- so you cannot nest other elements or style them. The Mozilla Web Docs state:

If you really need full control over the option styling, you'll have to either use some kind of library to generate a custom control, or build your own custom control...

See this and this for other questions like this, and this for advanced style tips; maybe you can find an alternative to select, or design your own dropdown with CSS.

Hopefully that helps you out.

TheWarHawk2005
  • 26
  • 5