Skip to content

Commit 0c5cee7

Browse files
committed
[css-forms-1] Add UA style rules for text fields
1 parent fc18e62 commit 0c5cee7

File tree

1 file changed

+45
-0
lines changed

1 file changed

+45
-0
lines changed

css-forms-1/Overview.bs

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -696,6 +696,51 @@ input[type=radio]:checked::checkmark {
696696
width: 100%;
697697
}
698698
```
699+
700+
## Text fields
701+
702+
```css
703+
input:not([type]),
704+
input:is([type=text], [type=search], [type=email], [type=password], [type=tel], [type=url], [type=number]),
705+
textarea {
706+
display: inline-grid;
707+
padding-inline: 2px;
708+
}
709+
710+
input:not([type]),
711+
input:is([type=text], [type=search], [type=email], [type=password], [type=tel], [type=url], [type=number]) {
712+
overflow-x: auto;
713+
scrollbar-width: none;
714+
padding-block: 1px;
715+
}
716+
717+
textarea {
718+
overflow-y: auto;
719+
padding-block: 2px;
720+
resize: both;
721+
}
722+
723+
::placeholder {
724+
color: color-mix(in srgb, currentColor 50%, transparent);
725+
display: none;
726+
line-break: anywhere;
727+
grid-area: 1/1;
728+
}
729+
730+
:placeholder-shown::placeholder {
731+
display: block;
732+
}
733+
734+
::field-text {
735+
grid-area: 1/1;
736+
min-block-size: 1lh;
737+
/* Should be cursor width but that's not exposed */
738+
min-inline-size: 1px;
739+
block-size: 100%;
740+
inline-size: 100%;
741+
}
742+
```
743+
699744
## Selects & buttons
700745

701746
```css

0 commit comments

Comments
 (0)