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

Question

The following will display a crosshair over the checkbox:

input:read-only {
    cursor: crosshair;
}

<input type="checkbox">

Why does this happen?

Answer 1

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

Answer 2

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