[css-ui] Clarify why user-select: none should be the default for button, meter, progress, select

[dizhang168]

The spec [1] was changed by commit [2]:

The following additions are made to the UA stylesheet for HTML:

button, meter, progress, select { user-select: none; }

However, there is no mention of how that decision was made (why this list of elements specifically?).
Note also that this is currently not specced in the HTML standard [3].

[1] https://drafts.csswg.org/css-ui/#issue-5d851d49
[2] 1c0b6c9
[3] whatwg/html#8228

[josepharhar]

@frivoal can you help us figure out the rationale for button { user-select: none; } which blink and webkit don't currently implement?

[frivoal]

It's been a while, but as far as I can remember, this came from trying to spec what browsers did at the time, more than a principled decision.

[lukewarlow]

I came across the discrepency between browsers with these styles the other day. I think it would be good to standardise and make the UA stylesheet interopable in this regard.

Gecko's relevant UA styles below (there's other properties in the selectors but this is what's relevant):

button,
::file-selector-button,
input:is([type=color], [type=reset], [type=button], [type=submit]) {
  user-select: none;
}

select {
  user-select: none;
}

Gecko has user-select of auto for meter and progress.

Blink relevant stylesheet rules:

input[type="button"] {
    user-select: none;
}

input[type="reset"] {
    user-select: none;
}

input[type="submit"] {
    user-select: none;
}

Blink has user-select of auto for (proper) buttons, and select as well as meter and progress.

WebKit has -webkit-user-select of text for input buttons*, (proper) buttons, and select as well as meter and progress.

• Though the CSS says text select should work in practice it actually doesn't. So observed behaviour is the same for input buttons in all browsers (no text selection).

---

There's an inline issue regarding button like variants of input.

Given Firefox's UA stylesheet includes these if the spec is going to include this rule I think it should include ::file-selector-button and input:is([type=reset], [type=button], [type=submit]) in the list.

Though I'm dubious of the utility of including color input, it's button like but it doesn't contain text content and can't be meaningfully selected anyway? Maybe include it for consistency with other button like UI?

---

I'm also dubious of the utility of including meter and progress in this rule, when they're not button like, and don't contain text to select? They're also not user-select: none in any of the current major browser engines.