[Solved] Why is the pseudo-class “:read-only” not working for a “disabled” element?

Question

If you test in Firefox, you will see your code working fine so I assume it’s a bug or a lack of support for Google Chrome

.pseudo-test input:read-write {
  color: blue;
}
.pseudo-test input:read-only {
  color: red;
}

<div style="margin-top:10px" class="pseudo-test">
  <form action="another-action.php">
    <input type="search" value="What do you want to search for?" size="100" disabled>
  </form>
</div>

To confirm that it should work fine, you can see in the specification:

The :read-write pseudo-class must match any element falling into one of the following categories, which for the purposes of Selectors are thus considered user-alterable: [SELECTORS]

input elements to which the readonly attribute applies, and that are mutable (i.e. that do not have the readonly attribute specified and that are not disabled)

textarea elements that do not have a readonly attribute, and that are not disabled

elements that are editing hosts or editable and are neither input elements nor textarea elements

The :read-only pseudo-class must match all other HTML elements.

So :read-write should apply to input if it doesn’t have readonly and disabled otherwise the :read-only apply (like in your case)

The same issue happen with textarea (working on Firefox and not Chrome)

.pseudo-test textarea:read-write {
  color: blue;
}
.pseudo-test textarea:read-only {
  color: red;
}

<div style="margin-top:10px" class="pseudo-test">
  <form action="another-action.php">
    <textarea  disabled>What do you want to search for?</textarea>
  </form>
</div>

It works fine for both with non-form elements:

.pseudo-test p:read-write {
  color: blue;
}
.pseudo-test p:read-only {
  color: red;
}

<div style="margin-top:10px" class="pseudo-test">
  <form action="another-action.php">
    <p >What do you want to search for?</p>
  </form>
</div>

Accepted Answer