✨ Newsletter Signup (Inline Form)
Enter your email to get updates.
🎯 What Are Focus States?
/* Focus state = when you click/tab into an input */
input:focus {
outline: none; /* Removes default blue outline
*/
border-color: #667eea; /* Changes border color
*/
box-shadow: 0 0 0 3px rgba(102,126,234,0.2);
/* Adds glow */
}
/* Other useful pseudo-classes */
input:hover { } /* When mouse is over */
input:valid { } /* When input has valid value */
input:invalid { } /* When input has invalid value */
input:disabled { } /* When input is disabled */
input:read-only { } /* When input cannot be edited */
📚 Form Styling Reference
/* Input padding - makes inputs comfortable to use */
input, textarea, select {
padding: 12px 16px;
border: 2px solid #e0e0e0;
border-radius: 10px;
}
/* Focus state - visual feedback when user clicks */
input:focus {
border-color: #667eea;
box-shadow: 0 0 0 3px
rgba(102,126,234,0.2);
}
/* Transition - smooth animation for all changes */
input {
transition: all 0.3s ease;
}
🧠 Quick Quiz
/* Question 1: What pseudo-class styles an input when clicked? */
/* Answer: :focus */
/* Question 2: How to remove the default blue outline on focus? */
/* Answer: outline: none; */
/* Question 3: What adds a glow effect around an input? */
/* Answer: box-shadow: 0 0 0 3px rgba(0,0,0,0.2); */
/* Question 4: What makes the border change smoothly? */
/* Answer: transition: all 0.3s ease; */