Why is the pseudo-class ":read-only" not working for a "disabled" element?

Question

The pseudo-class :read-only should apply to any element that does not match the :read-write selector, which means, any element that is not editable.

Well then, why is it that when I add disabled to an input element, the :read-only pseudo-class doesn't apply to it?

.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>

results in:

Answer 1

readonly and disabled are different, that's why :read-only will not work with disabled.

Check here Best Practice - ReadOnly vs Disabled in Form Controls

Now your next question: "...but the description of "read-only" pseudo-class is that it applies to any element that cannot be editable..."

One use of readonly form controls is to allow the user to check and verify information that they may have entered in an earlier form (for example, shipping details), while still being able to submit the information along with the rest of the form...

Source :read-only

If you connect 1st answer and the highlighted description here you can see, it won't be working for disabled (The value of the "disabled" control will not be submitted with the form)

What if you have both types of control in form and you only wants to style read-only. Then it won't be possible with one fits all approach

To style readonly you may need to add readonly attribute to the desired elements.

.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" readonly>
  </form>
</div>

Answer 2

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>