Styling Forms

🎨 CSS3+ 🟢 Chapter 38 of 49 📂 Phase 14: Forms & UI Components 📅 2026 Edition

📌 Covered in this chapter: Input Styling · Labels · Textareas · Select · Checkbox · Radio · Range · File · Focus · Valid/Invalid · Disabled · Placeholder · Form Layout · Error Messages

Welcome to Chapter 38: Styling Forms — part of the CSS Complete Roadmap. This lesson covers all subtopics with clear explanations, code examples, and best practices used in professional web development.

📚 What You Will Learn

All major HTML form controls ni professional ga style cheyadam
:focus-visible, :valid, :invalid, :disabled pseudo-classes use cheyadam
Accessible labels, error messages, and touch-friendly input sizing
Checkbox/radio custom styling and form layout patterns
Placeholder styling and form validation visual feedback

💡 Why This Matters

Forms are the primary user interaction point for login, signup, checkout, and contact pages. Poor form styling leads to confusion, accessibility failures, and lost conversions. Professional CSS form styling — clear focus rings, validation colors, consistent spacing — builds user trust and meets WCAG guidelines.

1Introduction — Forms Need Intentional CSS

Browser default form styles vary across Chrome, Firefox, Safari. Production apps lo consistent branding, accessible focus states, and validation feedback mandatory. CSS forms ni fully control chestundi — borders, padding, fonts, states, layout.

2Required HTML Structure

HTML — Semantic Form▶ Try in Editor


  
    Email address
    
    Please enter a valid email.
  

  
    Password
    
  

  
    Bio
    
  

  
    Country
    
  

  
    
      
      I agree to the terms

Key HTML rules: Every input needs a <label> with matching for/id. Use semantic type attributes for built-in validation.

3Base Input Styling & CSS Syntax

CSS — Form Base Styles▶ Try in Editor

.signup-form {
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 10px 14px;
  font-size: 1rem;
  font-family: inherit;
  color: #111827;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.form-group input:focus-visible,
.form-group textarea:focus-visible,
.form-group select:focus-visible {
  border-color: #2563eb;
  outline: 3px solid #bfdbfe;
  outline-offset: 0;
}

.form-group input:invalid:not(:placeholder-shown) {
  border-color: #dc2626;
}

.form-group input:valid:not(:placeholder-shown) {
  border-color: #16a34a;
}

.form-group input:disabled {
  background: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #9ca3af;
  opacity: 1;
}

Property / Selector	Explanation
`padding: 10px 14px`	Touch-friendly minimum 44px height achieve cheyadaniki
`:focus-visible`	Keyboard focus matrame ring show — mouse click ki ring ledu (better UX)
`:invalid:not(:placeholder-shown)`	User type chesaka matrame red border — empty field submit attempt ki
`::placeholder`	Hint text color — opacity: 1 Firefox consistency ki
`:disabled`	Gray background + not-allowed cursor — clear visual feedback

4Checkbox, Radio, Range & File Inputs

CSS — Custom Checkbox & Radio▶ Try in Editor

.checkbox-label,
.radio-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 500;
}

.checkbox-label input[type="checkbox"],
.radio-label input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: #2563eb;
  cursor: pointer;
}

input[type="range"] {
  width: 100%;
  accent-color: #2563eb;
  cursor: pointer;
}

input[type="file"] {
  padding: 8px;
  font-size: 0.875rem;
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  background: #f9fafb;
  cursor: pointer;
}

input[type="file"]::file-selector-button {
  padding: 8px 16px;
  margin-right: 12px;
  border: none;
  border-radius: 6px;
  background: #2563eb;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

Modern approach: accent-color quickly brand checkboxes/radios. Full custom design ki hidden input + styled ::before pseudo-element pattern use cheyochu.

5Error Messages & Form Layout

CSS — Error States▶ Try in Editor

.error-msg {
  display: none;
  font-size: 0.8125rem;
  color: #dc2626;
  font-weight: 500;
}

.form-group input:invalid:not(:placeholder-shown) ~ .error-msg {
  display: block;
}

/* Two-column form on desktop */
@media (min-width: 640px) {
  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}

🖥️ Expected Browser Output:

Valid email type chesaka green border kanipistundi. Invalid email ki red border + error message below input. Tab key tho navigate cheste blue focus ring clear ga kanipistundi.

6Responsive Form Example

CSS — Mobile-First Form▶ Try in Editor

@media (max-width: 480px) {
  .signup-form {
    padding: 16px;
  }

  .form-group input,
  .form-group select {
    font-size: 16px; /* Prevents iOS zoom on focus */
    min-height: 48px;
  }

  .btn-primary {
    width: 100%;
    min-height: 48px;
  }
}

iOS tip: Inputs below 16px font-size focus ayina auto-zoom trigger avuthundi — always use 16px+ on mobile.

⚠️ Common Mistakes

outline: none without replacement — keyboard users focus kanipinchadu
Color-only validation (red/green border without text) — colorblind users ki fail
Placeholder as label substitute — accessibility violation
:invalid on empty required fields immediately — use :not(:placeholder-shown)
Tiny checkboxes/radios below 24px — hard to tap on mobile

💻 Coding Challenge — Styled Contact Form

Add :invalid styling and a disabled submit button state using CSS only.

HTML▶ Try in Editor


  Name
  
  Message

CSS▶ Try in Editor

.contact-form { max-width: 400px; display: flex; flex-direction: column; gap: 12px; }
.contact-form input, .contact-form textarea {
  padding: 12px; border: 1px solid #ccc; border-radius: 8px;
}
.contact-form input:focus-visible, .contact-form textarea:focus-visible {
  outline: 3px solid #bfdbfe; border-color: #2563eb;
}
.contact-form button {
  padding: 12px; background: #2563eb; color: #fff; border: none; border-radius: 8px;
}

Open in HTML/CSS Editor →

❓ Mini Quiz

Q1 :focus vs :focus-visible — difference enti?

:focus triggers on any focus including mouse click. :focus-visible triggers mainly keyboard navigation ki — better UX without click rings.

Q2 Placeholder ni label ga use cheyadam enduku bad?

Placeholder disappears when user types. Screen readers and cognitive accessibility ki permanent visible label mandatory.

Q3 input:invalid eppudu apply avuthundi?

HTML5 constraint validation fail ayina — required empty, wrong email format, minlength not met, etc.

✅ Quick Recap

Semantic HTML + labels first — CSS styling second
:focus-visible for accessible focus rings — never remove outline without replacement
:valid/:invalid for visual validation feedback
accent-color for quick checkbox/radio branding
16px+ font-size on mobile inputs to prevent iOS zoom
Error messages text tho communicate — color alone sufficient kaadu

Written by Our Compiler Technical Editorial Team
Reviewed for accuracy · CSS Complete Roadmap · Last updated August 2026