102 lines
1.5 KiB
CSS
102 lines
1.5 KiB
CSS
:where(button, input, optgroup, select, textarea) {
|
|
font: inherit;
|
|
}
|
|
|
|
textarea, select, input {
|
|
field-sizing: content;
|
|
}
|
|
|
|
/* defensive style - just demo values */
|
|
textarea {
|
|
min-block-size: 3lh;
|
|
max-block-size: 80svh;
|
|
min-inline-size: 30ch;
|
|
max-inline-size: 80ch;
|
|
resize: vertical;
|
|
}
|
|
|
|
form {
|
|
display: grid;
|
|
gap: 1rem;
|
|
|
|
padding: 1em;
|
|
|
|
background: radial-gradient(var(--bg), var(--bg-alt)) 50%;
|
|
|
|
border-radius: 0.5em;
|
|
border: 1px solid var(--muted);
|
|
}
|
|
|
|
|
|
:where(input) {
|
|
font-size: inherit;
|
|
|
|
inline-size: fit-content;
|
|
|
|
min-inline-size: 25ch;
|
|
|
|
padding: 0.5rem;
|
|
|
|
border-radius: 0.25rem;
|
|
border: none;
|
|
|
|
color: var(--text);
|
|
|
|
&::placeholder {
|
|
font-style: italic;
|
|
}
|
|
|
|
&:required {
|
|
|
|
}
|
|
|
|
&:not(:placeholder-shown, :focus):user-invalid {
|
|
background-color: #300a0a;
|
|
color: #ffc8c8;
|
|
}
|
|
}
|
|
|
|
label:has(input:required)::before {
|
|
content: "* ";
|
|
}
|
|
|
|
label:has(input) {
|
|
background-color: red;
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
inline-size: fit-content;
|
|
}
|
|
|
|
select,
|
|
::picker(select) {
|
|
appearance: base-select;
|
|
}
|
|
|
|
select {
|
|
padding: 0.25em;
|
|
inline-size: fit-content;
|
|
|
|
&::marker {
|
|
color: red;
|
|
}
|
|
}
|
|
|
|
select::picker-icon {
|
|
color: #999;
|
|
transition: 0.4s rotate;
|
|
}
|
|
|
|
select:open::picker-icon {
|
|
rotate: 180deg;
|
|
}
|
|
|
|
|
|
/* select items */
|
|
::picker(select) {
|
|
appearance: base-select;
|
|
}
|
|
|
|
option:checked {
|
|
font-weight: bold;
|
|
}
|