:read-only CSS pseudo-class should match inputs to which the readonly attribute does not apply

By design Issue #7229941


Chris R.
Apr 17, 2016
This issue is public.
Found in
  • Microsoft Edge
  • Chrome
Found in build #
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

  1. Open the attached testcase in Edge.
  2. Observe the background colors of the words "Green".
    What is the expected behavior?
    Their background colors should be green.
    See attached Safari screenshot (which is correct except for the <input type="color"> because Safari doesn’t yet support <input type="color"> and thus interprets it as <input type="text">).
    What went wrong?
    Their background colors are red, indicating that the <input>s in question did not match the :read-only CSS pseudo-class, even though they should according to the current spec.
    See attached Edge screenshot.


Comments and activity

  • The spec admittedly gives unintuitive results here. I’m just arguing about spec compliance, not about the (un)reasonableness of the spec.

    Per https://html.spec.whatwg.org/multipage/scripting.html#selector-read-only

    The :read-only pseudo-class must match all other HTML elements [which don’t match :read-write].

    Per https://html.spec.whatwg.org/multipage/scripting.html#selector-read-write

    The :read-write pseudo-class must match any element falling into one of the following categories […]:

    • `` 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)
    • `` elements that […]
    • elements that are editing hosts or editable and are neither elements nor elements

    Per the table in https://html.spec.whatwg.org/multipage/forms.html#concept-input-apply ,
    the readonly attribute does not apply to s of type `hidden`, `range`, `color`, `checkbox`, `radio`, `file`, `image`, `submit`, `reset`, or `button`. Thus, suchs don’t match :read-write, and therefore must match :read-only.

    Note that Chrome currently suffers from the same bug, and Firefox doesn’t currently implement :read-only or :read-write.

  • Microsoft Edge Team

    Changed Status to “By design”

  • I don’t see why those fields should be read only. There is no readonly or disabled attribute on them. Chrome doesn’t render anything as green either. If safari renders them as readonly, this looks like a mistake. Could you check your test case and/or provide the relevant specs?

  • “provide the relevant specs?”
    I linked & quoted them extensively in my comment. (It would be nice if this bug tracker added some CSS for blockquote, btw.)

    “Chrome doesn’t render anything as green either.”
    See https://bugs.chromium.org/p/chromium/issues/detail?id=604154

    “Could you check your test case”
    Yes, see https://github.com/w3c/web-platform-tests/pull/2843
    @zcorpan agrees with my interpretation, but also agrees that this part of the spec isn’t particularly good.
    Perhaps you could add a comment to that GitHub thread?

You need to sign in to your Microsoft account to add a comment.

Sign in