Menu
Components & UI
CSS Forms
Styling inputs, buttons, and focus states.
1Input Styling
Make form fields look good.
Example Code
css
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
border: 1px solid #ccc;
border-radius: 4px;
}2Understand it in a real interface
A form style should account for more than its untouched state. Labels, hints, input types, focus, errors, and submission feedback all affect usability. CSS can describe these appearances, but a real form also needs working submission handling and appropriate validation.
3Try it yourself
Style a labeled email field and a submit button. Test the field when focused, filled, and invalid, using an error message in words. Add a longer hint and narrow the layout. Check that a success state appears only after a real submission has completed.
Finished reading?
Mark this topic as complete to track progress.