diff --git a/css-forms-1/Overview.bs b/css-forms-1/Overview.bs index 7b84ee5fc06..3585d743aeb 100644 --- a/css-forms-1/Overview.bs +++ b/css-forms-1/Overview.bs @@ -696,6 +696,51 @@ input[type=radio]:checked::checkmark { width: 100%; } ``` + +## Text fields + +```css +input:not([type]), +input:is([type=text], [type=search], [type=email], [type=password], [type=tel], [type=url], [type=number]), +textarea { + display: inline-grid; + padding-inline: 2px; +} + +input:not([type]), +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; +} + +textarea { + overflow-y: auto; + padding-block: 2px; + resize: both; +} + +::placeholder { + color: color-mix(in srgb, currentColor 50%, transparent); + display: none; + line-break: anywhere; + grid-area: 1/1; +} + +:placeholder-shown::placeholder { + display: block; +} + +::field-text { + grid-area: 1/1; + min-block-size: 1lh; + /* Should be cursor width but that's not exposed */ + min-inline-size: 1px; + block-size: 100%; + inline-size: 100%; +} +``` + ## Selects & buttons ```css