How to style basic form inputs with consistent, accessible design patterns
Master focus states using :focus, :focus-visible, and :focus-within
Customize placeholder text appearance with ::placeholder pseudo-element
Style disabled and read-only states to provide clear visual feedback
Implement common form layout patterns: stacked, inline, and grid layouts
Create accessible form controls with proper keyboard navigation support
Introduction to Form Styling
Form styling is essential for creating intuitive, accessible user interfaces. Well-styled forms guide users through data entry, provide clear feedback, and ensure consistency across different browsers and devices. Forms are one of the most important interaction points between users and web applications, making their design critical for usability.
CSS provides powerful pseudo-classes and pseudo-elements for styling form states. Understanding how to use :focus, :disabled, ::placeholder, and other form-specific selectors allows you to create professional, accessible forms that work well with keyboard navigation and assistive technologies.
Basic Input Styling
Start with clean, consistent styling for text inputs. Remove default browser styles and add custom borders, padding, and focus states. Using font-family: inherit ensures inputs match your page typography.
CSS provides three pseudo-classes for managing focus: :focus, :focus-visible, and :focus-within. Each serves a different purpose in creating accessible, user-friendly forms.
:focus (Standard Focus)
The :focus pseudo-class applies when an element receives focus through any method, including mouse clicks, touch, or keyboard navigation. It always shows a focus indicator regardless of how the element was focused.
The :focus-visible pseudo-class is smarter. It only shows focus indicators when the user navigates with a keyboard, hiding them when clicking with a mouse. This provides a cleaner visual experience without sacrificing accessibility.
The :focus-within pseudo-class styles a parent element when any child element has focus. This is useful for highlighting entire form sections or containers when users interact with inputs inside them.
The ::placeholder pseudo-element allows you to style placeholder text in form inputs. Use it to create subtle hints that don't distract from the actual input content.
Disabled and read-only inputs serve different purposes. Disabled inputs cannot be interacted with and their values aren't submitted with the form. Read-only inputs can be focused and copied, and their values are submitted.