Selection in form control elements, user-select, and customizable select

[josepharhar]

What is the issue with the HTML Standard?

Here's a codepen that shows some examples: https://codepen.io/jarhar/pen/LEPWaLo

Some interesting behavior I noticed:

1. <input type=text>: In chrome+firefox+safari, UA stylesheet has user-select:auto. Setting user-select:none does not prevent selection of text.
2. <button>: In chrome+safari, buttons have user-select:auto in the UA stylesheet and text selection does not work when using the mouse but does when using the keyboard (select all). In firefox, buttons have user-select:none in the UA stylesheet and text selection does work if you change it to user-select:auto.
3. <select>: In chrome+safari, UA stylesheet has user-select:auto, firefox has user-select:none. Selection does not work in chrome+safari when using the mouse, but does when using the keyboard (select all). If you set user-select:auto in firefox, then selection sort of works with the mouse but is hard to trigger due to the popup.

My takeaway from this is that chrome and safari have some code to prevent text selection with the mouse on these form control elements regardless of user-select, and firefox does not. I think there was another issue filed about this somewhere for <button>.

For customizable select, I want to make sure that selection isn't broken inside the picker unless we decide that it really should be. I'm still looking at the behavior there, but I think that adopting behavior more like firefox for customizable select will probably make this better since we can actually control it with css.

[mfreed7]

• <button>: In chrome+safari, buttons have user-select:auto in the UA stylesheet and text selection does not work when using the mouse but does when using the keyboard (select all). In firefox, buttons have user-select:none in the UA stylesheet and text selection does work if you change it to user-select:auto.

This is #8228

[josepharhar]

Thanks mason! From that issue:

The way I would expect this to be sliced:

• We don't have user-select:none by default and note that user-select is not a property that is honored for appearance:auto widgets. (This might need some specification effort.)
• Implementation can decide whether they want their appearance:auto widgets to be selectable or not. It should generally be up to them how appearance:auto widgets behave after all.
• Ideally they make those choices consistently across similar widgets.

Based on this, I think we should just add user-select:none to base appearance <select> and make selection work when authors change it to user-select:auto.