css pseudo elements on html option tag

pocketGod123 0
Viewed 22

is there a way to add a css pseudo element on a html option tag?

I have tried adding specifically to an disabled option but I have found it to be troublesome also on enabled option tags.

I tried the following approach:

css:

option:disabled span::before{
  color: red;
  content: "Not Available";
}

html:

<select>
   <option disabled><span></span> some text </option>
</select>

eventually I didnt manage to make it work. any thoughts on how to approach this properly?

pseudo-element forms css html
1 Answers

The :before applies to a child element and option does not have children, so the answer is no.

::before (:before) In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.

Reference - developer.mozilla

However, you can use javascript to replace the value.

Rohit Gupta0
Related