Form Pseudo-classes

🎨 CSS Form Pseudo-classes: Teaching Your Forms to Talk!

The Magic Mood Ring Story 💍

Imagine you have a magic mood ring that changes color based on how you feel. When you’re happy, it glows green. When you’re sad, it turns blue. When you’re excited, it sparkles!

CSS form pseudo-classes work exactly like that mood ring! They let you style form elements based on their “mood” or state. Is a checkbox checked? Is an input field empty? Is the password valid? CSS can see all of this and change styles automatically!

🎯 What Are Form Pseudo-classes?

Form pseudo-classes are special CSS selectors that target form elements based on their current state, not just what they are.

Think of it like this:

• Regular selector: “Style ALL buttons” 🔘🔘🔘
• Pseudo-class: “Style ONLY the button that’s being pressed” 🔘

✅ The :checked Pseudo-class

The Light Switch Analogy 💡

You know how a light switch has two positions? ON and OFF?

The :checked pseudo-class is like asking: “Is the switch ON?”

When a checkbox or radio button is checked (turned ON), you can give it special styles!

How It Works

/* Normal checkbox - light is OFF */
input[type="checkbox"] {
  width: 20px;
  height: 20px;
}

/* When checked - light is ON! */
input[type="checkbox"]:checked {
  background-color: green;
  border-color: darkgreen;
}

Real Example: Custom Toggle Switch

/* The label becomes clickable */
input:checked + label {
  color: green;
  font-weight: bold;
}

/* Hide default checkbox */
input[type="checkbox"]:checked {
  accent-color: purple;
}

What can be checked?

• ✅ Checkboxes (<input type="checkbox">)
• ✅ Radio buttons (<input type="radio">)
• ✅ Option elements in a dropdown

🔓 The :enabled and :disabled Pseudo-classes

The Toy Store Analogy 🧸

Imagine a toy store with two sections:

• Open section: You can touch and play with toys! (:enabled)
• Glass case section: Toys are locked away, you can only look! (:disabled)

Form elements work the same way. Some can be clicked and typed in. Others are “locked” and you can’t interact with them.

How It Works

/* Enabled input - you can use it! */
input:enabled {
  background-color: white;
  cursor: text;
}

/* Disabled input - locked away! */
input:disabled {
  background-color: #e0e0e0;
  cursor: not-allowed;
  opacity: 0.6;
}

The HTML Part

<!-- This one works! -->
<input type="text" value="Type here!">

<!-- This one is locked -->
<input type="text"
       value="Can't touch this"
       disabled>

When to Use This?

• 🔒 Lock a “Submit” button until a form is complete
• 🔒 Show old data that shouldn’t be changed
• 🔒 Prevent editing during loading

📝 The :required and :optional Pseudo-classes

The Permission Slip Analogy 📋

Remember permission slips from school?

• Required fields = “You MUST get a parent signature!”
• Optional fields = “Emergency contact is nice to have, but not required”

CSS can tell the difference between must-have and nice-to-have fields!

How It Works

/* Required fields get a red border */
input:required {
  border-left: 4px solid red;
}

/* Optional fields get a subtle style */
input:optional {
  border-left: 4px solid #ccc;
}

The HTML Part

<!-- This is REQUIRED - must fill! -->
<input type="text"
       name="name"
       required>

<!-- This is OPTIONAL - up to you! -->
<input type="text"
       name="nickname">

Visual Hint Pattern

/* Add a star next to required labels */
input:required + label::after {
  content: " *";
  color: red;
}

✅❌ The :valid and :invalid Pseudo-classes

The Spell Checker Analogy 📖

You know how spell checkers put:

• Green underline under correct words ✅
• Red squiggly line under misspelled words ❌

The :valid and :invalid pseudo-classes do the same for form inputs!

How It Works

/* Valid input - you did it right! */
input:valid {
  border: 2px solid green;
  background: #f0fff0;
}

/* Invalid input - something's wrong! */
input:invalid {
  border: 2px solid red;
  background: #fff0f0;
}

What Makes Input Valid or Invalid?

It depends on the input type and attributes:

<!-- Email must have @ symbol -->
<input type="email" value="test@mail.com">
<!-- ✅ Valid! Has @ -->

<input type="email" value="not-an-email">
<!-- ❌ Invalid! Missing @ -->

<!-- Number must be in range -->
<input type="number" min="1" max="10" value="5">
<!-- ✅ Valid! 5 is between 1-10 -->

<input type="number" min="1" max="10" value="99">
<!-- ❌ Invalid! 99 is too big! -->

Pattern Matching

<!-- Must be exactly 5 digits -->
<input type="text"
       pattern="[0-9]{5}"
       value="12345">
<!-- ✅ Valid! -->

<input type="text"
       pattern="[0-9]{5}"
       value="123">
<!-- ❌ Invalid! Only 3 digits -->

👻 The :placeholder-shown Pseudo-class

The Empty Fish Tank Analogy 🐠

Imagine a fish tank with a sign that says “Add fish here!”

• When the tank is EMPTY, you see the sign 📝
• When you ADD fish, the sign disappears! 🐟🐠🐡

The :placeholder-shown pseudo-class targets inputs that are still showing their placeholder text (meaning the user hasn’t typed anything yet).

How It Works

/* When placeholder is visible (empty) */
input:placeholder-shown {
  border-style: dashed;
  background: #f9f9f9;
}

/* When user types (placeholder hides) */
input:not(:placeholder-shown) {
  border-style: solid;
  background: white;
}

The HTML Part

<input type="text"
       placeholder="Type your name...">

Floating Label Pattern

This is super popular! The label “floats” up when you start typing:

/* Label starts inside the input */
.input-wrapper label {
  position: absolute;
  top: 50%;
  transition: all 0.2s;
}

/* When typing, label floats up! */
input:not(:placeholder-shown) + label {
  top: 0;
  font-size: 12px;
  color: blue;
}

🎨 Combining Pseudo-classes (Power Moves!)

You can mix and match these pseudo-classes for precise targeting:

/* Required AND invalid - urgent! */
input:required:invalid {
  border: 2px solid red;
  animation: shake 0.5s;
}

/* Required AND valid - success! */
input:required:valid {
  border: 2px solid green;
}

/* Disabled checkbox that's checked */
input[type="checkbox"]:disabled:checked {
  opacity: 0.5;
}

/* Empty optional field */
input:optional:placeholder-shown {
  background: #fafafa;
}

📊 Quick Reference Chart

graph TD
    A["Form Input"] --> B{Is it checked?}
    B -->|Yes| C[":checked"]
    B -->|No| D{Can user interact?}
    D -->|Yes| E[":enabled"]
    D -->|No| F[":disabled"]
    A --> G{Is it mandatory?}
    G -->|Yes| H[":required"]
    G -->|No| I[":optional"]
    A --> J{Is value correct?}
    J -->|Yes| K[":valid"]
    J -->|No| L[":invalid"]
    A --> M{Is placeholder showing?}
    M -->|Yes| N[":placeholder-shown"]

🌟 Real-World Example: Smart Form

Here’s how all these work together in a real form:

/* Base input style */
input {
  padding: 10px;
  border: 2px solid #ccc;
  border-radius: 5px;
  transition: all 0.3s;
}

/* Mark required fields */
input:required {
  border-left: 4px solid orange;
}

/* Valid = green glow */
input:valid {
  border-color: green;
}

/* Invalid = red glow */
input:invalid {
  border-color: red;
}

/* Disabled = grayed out */
input:disabled {
  background: #eee;
  cursor: not-allowed;
}

/* Empty field = subtle hint */
input:placeholder-shown {
  background: #f9f9ff;
}

🎁 Key Takeaways

🚀 You Did It!

You now understand CSS form pseudo-classes! These are your tools for making forms that:

• ✨ Give instant visual feedback
• 🎯 Guide users to fill forms correctly
• 💡 Look professional and polished
• 🛡️ Help prevent errors before submission

Remember the mood ring! Your form elements have states, and now you know how to style each one perfectly! 💍✨