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

Answer 1

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>