Question 382813 in Html Question posted in
Some basic documentation can be found here.

Why does an html checkbox always have the attribute of read-only?

The following will display a crosshair over the checkbox:

input:read-only {
    cursor: crosshair;
}
<input type="checkbox">

Why does this happen?

Tags:

2

Answers


  1. 0

    Here’s what the specification has to say:

    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: […]

    • 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)
    • ⋮

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

    readonly doesn’t apply to checkboxes:

    <label><input type="checkbox" readonly> check this out</label>

    So even though it might seem a bit weird on the surface, it’s intended behavior: :read-only/:read-write refer to a more specific type of “writable”.

    Login or Signup to reply.
  2. 0

    "The :read-only CSS pseudo-class represents an element (such as input or textarea) that is not editable by the user."

    See also https://developer.mozilla.org/en-US/docs/Web/CSS/:read-only

    checkboxes are not editable in any state…

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search