[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)
|
|
||
| textarea { | ||
| overflow-y: auto; | ||
| padding-block: 2px; |
No description provided.