Bug 244448

Summary:	Should <button> have `user-select: none;` by default?
Product:	WebKit	Reporter:	Valtteri Laitinen <dev>
Component:	DOM	Assignee:	Karl Dubost <karlcow>
Status:	NEW ---
Severity:	Trivial	CC:	dev, karlcow, webkit-bug-importer
Priority:	P2	Keywords:	BrowserCompat, InRadar
Version:	Safari Technology Preview
Hardware:	Unspecified
OS:	Unspecified
See Also:	https://bugs.webkit.org/show_bug.cgi?id=208677

Description Valtteri Laitinen 2022-08-28 04:20:18 PDT

The user agent style sheet includes `user-select: none;` for <input type="button"> but not for <button>. Should we add `user-select: none;` to <button> for consistency? Or is there a good reason for the inconsistency?

To reproduce:
1. Open the following URL and see how the button text is selectable: data:text/html,Foo <button>Bar</button> Baz
2. Here the button text is unselectable: data:text/html,Foo <input type="button" value="Bar"> Baz

Other browsers:
• Neither <button> or <input type="button"> is selectable in Firefox.
• Chromium behaves like WebKit here: https://crbug.com/1356522

Comment 1 Valtteri Laitinen 2022-08-28 04:50:41 PDT

In fact, there’s no `user-select: none;` for <input type="button"> in the user agent style sheet, but the text is magically unselectable and cannot be made selectable with CSS.

Also, WebKit doesn’t support the unprefixed `user-select` so `-webkit-user-select` must be used.

Comment 2 Karl Dubost 2022-08-28 22:35:17 PDT

There is a bug open on Firefox about selection and button
https://bugzilla.mozilla.org/show_bug.cgi?id=1763744
which was opened because of this webcompat issue.
https://github.com/webcompat/web-bugs/issues/102132

Comment 3 Radar WebKit Bug Importer 2022-08-28 22:35:48 PDT

<rdar://problem/99262559>

Comment 4 Karl Dubost 2022-08-28 22:37:55 PDT

This should be probably filed as a spec issue.

Comment 5 Karl Dubost 2022-08-28 22:45:31 PDT

I filed https://github.com/whatwg/html/issues/8228

Comment 6 Valtteri Laitinen 2022-09-24 05:10:59 PDT

Note the css-ui spec [1] includes the following:

> The following additions are made to the UA stylesheet for HTML:
> button, meter, progress, select { user-select: none; }
[1] https://drafts.csswg.org/css-ui/#issue-5d851d49 (just before the inline issue)

Comment 7 Karl Dubost 2023-02-13 00:12:44 PST

Pull request: https://github.com/WebKit/WebKit/pull/10017