5

Why is the <select> tag readonly by default?

select:read-only {
    background-color: orange;
}
<select>
    <option value="lizard">lizard</option>
    <option value="giraffe">giraffe</option>
    <option value="lion">lion</option>
</select>

My question is, if <select> doesn't have a readonly attribute (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attributes) and the equivalent for it is disabled, then why the CSS selector works and the style is applied to it?

Shahriar
  • 1,855
  • 2
  • 21
  • 45
  • 6
    Because that is how [the specification](https://html.spec.whatwg.org/multipage/semantics-other.html#selector-read-only) dictates it. – Ivar Mar 08 '23 at 12:29
  • 3
    To the best of my understanding a read-only element doesn't prevent programmatic access or updates, only user input. How would you expect a user to update a select-element's value or content natively? Although it's somewhat interesting to read that "*The attribute is not supported or relevant to ` – David Thomas Mar 08 '23 at 12:30
  • 2
    It's closely related to [this question](https://stackoverflow.com/questions/70375526/why-is-read-only-css-pseudo-class-being-applied-on-this-checkbox), though that one is about checkboxes instead of select-elements. – Ivar Mar 08 '23 at 12:38
  • IOW the semantics are "can an user actually edit the value(s) here"; a [combo box](https://en.wikipedia.org/wiki/Combo_box) (which can be emulated with `` + ``) would not be `:read-only`... – AKX Mar 08 '23 at 13:53

1 Answers1

2

What conditions should be matched for a <select> to get the :read-only pseudo element?

Quoting The Mutability Pseudo-classes docs:

An element matches :read-write if it is user-alterable, as defined by the document language. Otherwise, it is :read-only.

Quoting the :read-only HTML Specs:

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 for a <select> to get the read-only attribute, it must not be

  • User-alterable
  • An editing host
  • Editable

Addressing these criteria one by one

- User-alterable

Looking for a quote to back this

- An editing host

Quoting the whatwh editing host definition specs:

An editing host is either an HTML element with its contenteditable attribute in the true state or plaintext-only state, or a child HTML element of a Document whose design mode enabled is true.

Clearly, the <select> does not match these criteria

- Editable

Again, quoting the relevant common definitions specs:

Something is editable if it is a node; it is not an editing host; it does not have a contenteditable attribute set to the false state; its parent is an editing host or editable; and either it is an HTML element, or it is an svg or math element, or it is not an Element and its parent is an HTML element.

A <select> is of type HTMLElement, so without the contenteditable attribute, it's not editable

0stone0
  • 34,288
  • 4
  • 39
  • 64