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

Several use cases, posted as a reply to [my tweet](https://twitter.com/LeaVerou/status/1554570719211708417):

[Google image search options](https://twitter.com/kizmarh/status/1554799904538632193) (not implemented with `<select>` but totally could be):

![ezgif-4-a9f1f850b9](https://user-images.githubusercontent.com/175836/182678113-26a3db87-3782-4f29-9778-c12ca53b19c2.gif)

[Random design system](https://nordhealth.design/components/select/?example=expanded): ([source](https://twitter.com/kizmarh/status/1554800219249852418))

![ezgif-4-8d87f8ff89](https://user-images.githubusercontent.com/175836/182678205-8966a8da-4252-46a5-9dbf-acf271f4bd1c.gif)

[Datadog](https://twitter.com/kizmarh/status/1554801943683424258):

![ezgif-4-e8adf8bc29](https://user-images.githubusercontent.com/175836/182677730-d17f8c8b-c195-49cf-a600-5ed8ad7e6dfc.gif)

OSX Contacts app:
<img width="266" alt="image" src="https://user-images.githubusercontent.com/175836/182678397-dbed1582-be23-4059-a3f3-08c54c126ef0.png">

At https://app.sendcash.africa/home ([source](https://twitter.com/uxFeranmi/status/1554586097337917444))
<img width="232" alt="image" src="https://user-images.githubusercontent.com/175836/182678514-230492ba-d3a1-42e4-b5ed-949745168b07.png">

Inputs at https://matrixcalc.org/ ([source](https://twitter.com/4esn0k/status/1554575856332427264))

<img width="368" alt="image" src="https://user-images.githubusercontent.com/175836/182678852-4221a5d8-02fa-44b0-9894-cca94718f014.png">

Several people also mentioned tag UIs like:

![image](https://user-images.githubusercontent.com/175836/182679120-afdb4eda-9970-4ce8-830a-8f5c4826e985.png)

Filter with text-align: center; and autosized `<select>`
[https://area.at/de/expertise-ueberblick](https://t.co/HaP3yGVZVJ)

![image](https://user-images.githubusercontent.com/175836/182679082-00120242-998e-4687-88e8-bd311556b8de.png)

This has both: 
![image](https://user-images.githubusercontent.com/175836/182679244-1f5d459b-c61f-4c45-93f0-4a1a71aa4031.png)

[natto.dev](https://t.co/oo2NjLgwQj) does this for editable node titles ([source](https://twitter.com/jlazaroff/status/1554612442549964801)):

<img width="339" alt="image" src="https://user-images.githubusercontent.com/175836/182679418-142d93db-179b-44ac-92b2-9c77d2dbbecd.png">

Select elements are not used here in part because the the width of the differing options. ([source](https://twitter.com/ollicle/status/1554749515277934592))
[https://peoplecare.com.au](https://t.co/KLwSvZHQw0):

![image](https://user-images.githubusercontent.com/175836/182679594-1f88625a-2b3f-4d64-bf57-8412f033db32.png)

Another *natural language form* ([source](https://twitter.com/BaliBaloPG/status/1554791906395160578)):

![image](https://user-images.githubusercontent.com/175836/182679765-a251eece-66ef-4709-8010-c28bd9ca04af.png)

And another one: ([source](https://twitter.com/marie_ototoi/status/1554800365236879361/photo/1))

![image](https://user-images.githubusercontent.com/175836/182679876-7f544b86-fd5e-40d2-81a7-4eb68035bf11.png)

"For `<select>`, there is this breadcrumb scenario which would be great to have auto-sized widths (with a max-width, of course) based on current selection. Currently, I'm forced to make my best guess for width and then text-overflow:ellipsis." ([source](https://twitter.com/jonarino/status/1554813306283724805)):

![image](https://user-images.githubusercontent.com/175836/182680005-391abcef-9fee-4c08-8792-cbdb10479d18.png)

And several more examples mentioned in the thread without links or visuals…

-- 
GitHub Notification of comment by LeaVerou
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7552#issuecomment-1204316856 using your GitHub account


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

Received on Wednesday, 3 August 2022 18:17:41 UTC