Loading...

CSS Form Controls

Forms are where people type, choose, and send. CSS can make input, textarea, and select clearer and calmer — readable padding, tidy borders, and a focus cue you can actually see — while HTML keeps the controls semantic.

A form-control toolkit

📊 Form controls at a glance

Piece Everyday job
input / textarea / select The main controls you style together for a consistent form
padding + border Give fields room and a clear edge
border-radius Soften corners so fields feel modern, not harsh
:focus-visible Show a keyboard/pointer focus ring without guessing
:disabled Dim controls that cannot be edited right now

Style a shared class (or element group) once so every field in the form feels like it belongs to the same family. Fancy button skins wait for the next lesson.

Text inputs — room and edges

Default browser inputs often look uneven across devices. Set width, padding, font-size, and a light border so typing feels comfortable.

Base text input

css
CSS Code 
input[type="text"],
input[type="email"],
input[type="password"] {
width: 100%;
max-width: 24rem;
padding: 0.6rem 0.75rem;
font: inherit;
border: 1px solid #c5c5c5;
border-radius: 0.375rem;
background: #fff;
}

Textarea — space to write

Textareas need height and the same padding language as inputs. Allow vertical resize if long answers are expected; lock it when layout must stay fixed.

Comfortable textarea

css
CSS Code 
textarea {
width: 100%;
max-width: 24rem;
min-height: 7rem;
padding: 0.6rem 0.75rem;
font: inherit;
border: 1px solid #c5c5c5;
border-radius: 0.375rem;
resize: vertical;
}

Select — match the family

Dropdowns should share border, radius, and padding with text fields so the form does not feel patched together.

Select in the same family

css
CSS Code 
select {
width: 100%;
max-width: 24rem;
padding: 0.6rem 0.75rem;
font: inherit;
border: 1px solid #c5c5c5;
border-radius: 0.375rem;
background: #fff;
}

Focus you can see

Never remove focus styles without a replacement. :focus-visible lets you draw a clear ring for keyboard users while keeping the look calm.

Visible focus ring

css
CSS Code 
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 2px solid #0b5fff;
outline-offset: 2px;
border-color: #0b5fff;
}

Disabled fields

Disabled controls should look unavailable — lower opacity or a muted background — without disappearing from the layout.

Disabled tone

css
CSS Code 
input:disabled,
textarea:disabled,
select:disabled {
opacity: 0.6;
background: #f3f3f3;
cursor: not-allowed;
}

A calm field habit

Keep one shared field style, match label spacing nearby, preserve focus, and leave primary button styling for the Buttons lesson.

Shared field class

css
CSS Code 
.field {
display: block;
width: 100%;
max-width: 24rem;
padding: 0.6rem 0.75rem;
font: inherit;
border: 1px solid #c5c5c5;
border-radius: 0.375rem;
}

.field:focus-visible {
outline: 2px solid #0b5fff;
outline-offset: 2px;
}

Try it yourself

  1. Style text/email inputs with padding, border, and border-radius.
  2. Match a textarea to the same look; set resize: vertical.
  3. Style a select with the same border family.
  4. Add :focus-visible outline + border color — do not use bare outline: none.
  5. Dim a :disabled input and check it still reads as a field.

Common mistakes

  • outline: none on inputs with no focus replacement (keyboard users get lost)
  • Tiny padding / small font that makes mobile typing painful
  • Styling every control differently so the form feels random
  • Turning this lesson into button design (that is next)
  • Mixing this with table border-collapse / zebra rows (previous session)

Summary

  • Shared padding, border, and radius unify inputs, textareas, and selects
  • Give textareas height and sensible resize behavior
  • Keep a visible :focus-visible cue
  • Soften :disabled fields; do not hide them
  • Leave button cosmetics for the next lesson

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
7
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 33 of 35
Css Tutorial