Selecting disabled elements

Asked

Viewed 28 times

0

I need to differentiate the view from a select box where there is an element selected by default, but it cannot be selected by the user (as if it were a placeholder of a normal input), but I want to style it, I tried to use something like option:disabled CSS that I found on some sites, however, did not have any effect, how can I solve my problem ?

EX:

<select>
  <option disabled selected>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>
css selectors

  • I’ll put it as executable code, as I understand it worked. After you select you cannot select the option with value = 1 more, that would be it?

  • no, it would be the option using a disabled, because it can be anyone, even with a different value, and it is not necessary to put an executable, since it does not have a CSS or javascript to test.

  • And it’s not a matter of selecting the item, it’s a matter of selecting the disabled element and styling it with CSS

1 answer

1


that’s what you’re looking for?

option[disabled]{
  color:red;
  background:rgba(255,0,0,.2);
}
<select>
  <option disabled selected>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>

Browser other questions tagged css selectors

You are not signed in. Login or sign up in order to post.