[csswg-drafts] [css-ui?] Allow `<input>` and `<select>` to be sized by contents (#7552)

LeaVerou has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-ui?] Allow `<input>` and `<select>` to be sized by contents ==
As I pointed out in #7542, one often wants to size single-line form controls by contents. Primary use cases are UIs which look like regular content with some parts are editable (e.g. form letters). Here's an example from Google Sheets using select-like controls.

<img width="489" alt="image" src="https://user-images.githubusercontent.com/175836/182256052-50a5b0aa-6641-42da-9294-8da2cc0e7ad2.png">

This is currently *insanely* difficult to do well with native form controls due to things like spinner arrows, date input picker triggers, dropdown arrows etc. It would be nice if we could just do `width: fit-content`. A lot of the issues with `height: max-content` that were mentioned in #7542 only apply to textareas and thus shouldn't apply here. Placeholders do still apply, but I don't see why they wouldn't be considered "content", they are shadow DOM descendants. On a regular element shadow DOM descendants absolutely take part in calculating it's intrinsic size. So this should do the right thing for placeholders anyway.

@emilio did some preliminary research on implementability of this in Gecko and said it should be fairly easy to implement (he made the change for `<select>` in 2 minutes!). 

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7552 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 1 August 2022 22:33:58 UTC