Styling the controls the browser draws in CSS

Some parts of a form control are yours to style and some belong to the browser.

:root { accent-color: #2b6cb0; }

.select {
  appearance: none;
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.375rem;
  background: url("/img/chevron.svg") no-repeat right 0.6rem center;
}

.input:user-invalid { border-color: #dc2626; }
.input:placeholder-shown { font-style: italic; }

.grow {
  field-sizing: content;
  min-block-size: 3lh;
}

How it works

1. accent-color recolors checkboxes, radios and range without a rebuild.
2. appearance: none hands you the whole control, borders and arrow included.
3. field-sizing: content lets a textarea grow with what is typed into it.

Keywords and builtins used here

• appearance
• background
• border
• content
• grow
• input
• padding
• px
• rem
• select
• url

The run, in numbers

Lines

17

Characters to type

371

Tokens

84

Three-star pace

85 tpm

At the three-star pace of 85 tokens a minute, this run takes about 59 seconds.

Type this snippet

Step 2 of 2 in Controls, step 2 of 13 in Styling components.

← Previous Next →