Welcome to Part 25 of the CSS Mastery & Responsive Layouts Course. In this part, we will explore Form Control Styling & Accent Colors.

By default, web browsers style form inputs, select dropdowns, checkboxes, and radio buttons using the operating system’s default widgets. These widgets are inconsistent across platforms and difficult to custom brand. We will cover form resets, focus indicators, checkbox overrides using appearance: none, the modern accent-color property, and placeholder styles.

---

Chapter 141: Input Box Resets & Focus Indicators

To custom style form input fields, you must override default browser styles:

input[type="text"], textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #cbd5e1;
  border-radius: 6px;
  background-color: white;
  color: #1e293b;
  transition: border-color 0.2s, box-shadow 0.2s;
}

✦ Focus States: :focus vs. :focus-visible

• :focus: Triggers whenever an element is focused, whether by mouse click or keyboard tab. This can create annoying outline rings for mouse users.
• :focus-visible: Triggers only when the browser detects keyboard tab navigation focus. This is the modern standard for accessibility rings:

input:focus-visible {
  outline: 3px solid #3b82f6;
  outline-offset: 2px;
}

---

Chapter 142: Custom Checkboxes with appearance

Native checkboxes and radio buttons ignore height, width, and background properties. To custom style them, use the appearance property:

/* Disable default OS styling */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  
  width: 20px;
  height: 20px;
  border: 2px solid #cbd5e1;
  border-radius: 4px;
  background-color: white;
  cursor: pointer;
  display: inline-grid;
  place-content: center;
}

/* Checked styling using pseudo-elements */
input[type="checkbox"]:checked {
  background-color: #3b82f6;
  border-color: #3b82f6;
}
input[type="checkbox"]:checked::before {
  content: "";
  width: 10px;
  height: 10px;
  background-color: white;
  clip-path: polygon(14% 44%, 0 58%, 38% 96%, 100% 23%, 84% 9%, 38% 66%);
}

---

Chapter 143: The Accent Color Property

If you want to style form elements quickly without rebuilding them using appearance, use the modern accent-color property:

/* Instantly changes checked/active colors of checkboxes, radios, ranges, and progress bars */
form {
  accent-color: #ef4444; /* Checked boxes turn red */
}

---

Chapter 144: Placeholder Styling (::placeholder)

Allows styling the placeholder text inside inputs:

input::placeholder {
  color: #94a3b8;
  opacity: 1; /* Reset default opacity in Firefox */
  font-style: italic;
}

---

Chapter 145: Forms Practice & Self-Check

★ Practice Exercises

1. Exercise 1: Accessibility Focus Indicator: Build a clean form group with high-visibility keyboard focus rings.

   .form-input {
     border: 1px solid #ccc;
     outline: none;
   }
   .form-input:focus-visible {
     outline: 2px solid purple;
     outline-offset: 1px;
   }

★ Self-Check Questions

1. What property disables native OS styling on elements?
   • Answer: appearance: none.
2. Which focus pseudo-class only triggers during keyboard tab focus?
   • Answer: :focus-visible.
3. What property quickly styles checkbox/range fills without custom styling?
   • Answer: accent-color.
4. Which pseudo-element targets input placeholder text?
   • Answer: ::placeholder.
5. Why is it important to set opacity: 1 on placeholders in Firefox resets?
   • Answer: Firefox default styles apply a low opacity to placeholder text by default, which can cause accessibility contrast issues.
6. Can you change the border-color of an input:focus state?
   • Answer: Yes, standard borders transition during focus.
7. Does accent-color support all HTML form controls?
   • Answer: It support checkboxes, radio buttons, range sliders, and progress meters.
8. What is the default value of the appearance property?
   • Answer: auto (browser UI rendering).
9. Why should focus rings not be removed completely?
   • Answer: It prevents keyboard-only users from visually tracking their position on the page, blocking navigation.
10. Which selector targets checked radio controls?
    • Answer: input[type="radio"]:checked.