OneTaskBy Tim King · Updated
CSS Input Generator
Text Box and Textarea Styles with Focus States
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the CSS Input Generator works
This CSS input generator styles a text box and a textarea together: outlined, filled or underline, in your colours, size and corner radius. Type into the preview to see the focus ring, then copy HTML and CSS that already cover placeholder, focus and disabled states.
Text inputs are where visitors do the most work on a form, so they need a clear label, a visible edge and an obvious focus state. The preview shows a labelled text box, a textarea and a disabled field side by side, all sharing one .input class.
Styles the CSS input generator makes
Outlined draws a full border and adds a soft glow on focus, the most familiar look for a text box. Filled uses a light grey background with a bottom border, as in Material design. Underline keeps only the bottom line, which suits minimal and editorial layouts.
Accessible text boxes
Every field gets a real <label> linked with for and id, because placeholder text alone disappears when people type and is not read reliably by screen readers. The focus style uses :focus-visible and changes colour, not only shape. Keep the border colour dark enough to see against the page, ideally at least 3 to 1 contrast.
FAQ
How do I style a text box with CSS?
Give the input a class and set its padding, border, border radius, background and font. Add a :focus-visible rule so keyboard users can see where they are, and a ::placeholder rule to soften the hint text. This tool writes all of these for you.
How do I make a textarea the same as my inputs?
Use the same class on both, as the generated CSS does with .input. Then add a minimum height and resize: vertical to the textarea so people can make it taller without breaking the width of your layout.
Why does my input look different in Safari or on iPhone?
Browsers add their own styles to form fields. Setting font: inherit, an explicit border and background usually evens them out. On iPhone, a font size under 16 pixels makes Safari zoom in on focus, so keep the medium or large size for mobile forms.
See also: all Forms & Inputs tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, UI Components, Colour.
Related tools
Contact Form Builder
Accessible contact forms with labelled fields and focus styles.
Form Validation Generator
Inline form validation with custom messages, on blur or on submit.
Input Mask Generator
Auto-formatting inputs for phone, date, card and custom patterns.
Checkbox Styler
Custom tick boxes and toggle switches from a real checkbox.
CSS Button Generator
Design a button with hover, focus and disabled states.