[css-forms-1] Add UA style rules for text fields #11897
Conversation
| ```css | ||
| input:is([type=text], [type=search], [type=email], [type=password], [type=tel], [type=url], [type=number]), | ||
| textarea { | ||
| display: inline-grid; |
There was a problem hiding this comment.
this should maybe use the modern syntax?
lukewarlow
force-pushed
the
styles-text-fields
branch
from
b436f44 to
4a899fb
Compare
|
|
||
| ```css | ||
| input:not([type]), | ||
| input:is([type=text], [type=search], [type=email], [type=password], [type=tel], [type=url], [type=number]), |
There was a problem hiding this comment.
I think this is every textual input?
lukewarlow
force-pushed
the
styles-text-fields
branch
from
4a899fb to
bb1a516
Compare
| color: color-mix(in srgb, currentColor 50%, transparent); | ||
| display: none; | ||
| line-break: anywhere; | ||
| grid-area: 1/1; |
There was a problem hiding this comment.
Used to stack the elements atop each other. Not aware of a way to do this using flex?
| } | ||
|
|
||
| ::placeholder { | ||
| color: color-mix(in srgb, currentColor 50%, transparent); |
There was a problem hiding this comment.
Possibly too low contrast (same would apply to disabled button-like text)
css-forms-1/Overview.bs
Outdated
| ::field-text { | ||
| grid-area: 1/1; | ||
| /* Should be cursor width but that's not exposed */ | ||
| min-width: 1px; |
There was a problem hiding this comment.
Not sure what to do about this?
There was a problem hiding this comment.
Would maybe need adjusting based on this (e.g. using calc-size) #12019 (comment)
|
cc @mfreed7 due to your comments around flex layout. |
css-forms-1/Overview.bs
Outdated
| textarea { | ||
| display: inline-grid; | ||
| padding-inline: 2px; | ||
| field-sizing: content; |
There was a problem hiding this comment.
Do we maybe also want to set cursor to text for these?
lukewarlow
force-pushed
the
styles-text-fields
branch
2 times, most recently
from
fddd43a to
84f8652
Compare
lukewarlow
force-pushed
the
styles-text-fields
branch
from
84f8652 to
0c5cee7
Compare
| input:is([type=text], [type=search], [type=email], [type=password], [type=tel], [type=url], [type=number]), | ||
| textarea { | ||
| display: inline-grid; | ||
| padding-inline: 2px; |
There was a problem hiding this comment.
Should this be 0.125em? (2/16)
| input:is([type=text], [type=search], [type=email], [type=password], [type=tel], [type=url], [type=number]) { | ||
| overflow-x: auto; | ||
| scrollbar-width: none; | ||
| padding-block: 1px; |
There was a problem hiding this comment.
Should this be 0.0625em? (1/16)
There was a problem hiding this comment.
Ideally padding should be consistent across select, buttons and inputs
|
|
||
| textarea { | ||
| overflow-y: auto; | ||
| padding-block: 2px; |
|
@nt1m do you have any thoughts on this? Currently we have nothing defined for these so it would be good to make some progress on it but we don't have a strong definition for placeholder or field-text yet? |
They seem reasonable, but also hard to verify without prototyping |
|
https://codepen.io/lukewarlow/pen/wBvqovL - here's a custom element with the applied styles that should demonstrate roughly what it looks like. |
|
|
||
| ::field-text { | ||
| grid-area: 1/1; | ||
| min-block-size: 1lh; |
There was a problem hiding this comment.
This probably needs a font-size: max(1em, 24px) rule
| grid-area: 1/1; | ||
| min-block-size: 1lh; | ||
| /* Should be cursor width but that's not exposed */ | ||
| min-inline-size: 1px; |
There was a problem hiding this comment.
Should this actually be 24px? So the textarea/input is never smaller than 24px x 24px?
There was a problem hiding this comment.
I wonder if this really belongs on field-text, ditto for min-block-size/font-size. Ideally they'd just inherit what they need from the parent.
No description provided.