5 Pure CSS3 with JSPublished 2026-10-04Free · no sign-up
Eight text input patterns for forms: a floating label, a search box with a clear button, an underline field, validation states, one-time code boxes, a password field with a Show button, prefix and suffix add-ons, and a textarea with a character counter.
The label sits inside the field like a placeholder and floats above it once the field has focus or a value. It relies on :placeholder-shown with a single-space placeholder, so the real label is always present for screen readers and autofill.
A search field with a magnifier on the left and a clear button on the right that only appears when there is text. The icon is decorative SVG, the clear button has its own accessible name, and type="search" brings the right mobile keyboard.
A minimal field with only a bottom border. On focus a coloured bar grows outward from the centre, drawn with a background gradient whose size animates, so there are no extra elements and the effect is skipped when reduced motion is set.
The three states every form needs, side by side: default with a hint, an error with a message tied to the field through aria-describedby and aria-invalid, and a success state. Each state is shown with an icon and text as well as colour.
View code
<div class="st">
<div class="f"><label for="a1">Username</label><input id="a1" value="sam" aria-describedby="a1h"><p id="a1h" class="h">3 to 20 letters or numbers.</p></div>
<div class="f bad"><label for="a2">Email</label><input id="a2" value="sam@" aria-invalid="true" aria-describedby="a2h"><p id="a2h" class="h">⚠ Enter a full email address, like name@example.com.</p></div>
<div class="f good"><label for="a3">Store URL</label><input id="a3" value="sams-shop" aria-describedby="a3h"><p id="a3h" class="h">✓ That name is available.</p></div>
</div>
Six boxes for a verification code. Typing moves to the next box, Backspace moves back and pasting a whole code fills every box. Each box is labelled for screen readers, and autocomplete="one-time-code" lets phones offer the code from a text message.
A password field with a Show and Hide button inside it. The button swaps the input type and updates aria-pressed so screen readers announce the state, and autocomplete="current-password" keeps password managers working.
const btn = document.querySelector('.pw-box button'), field = document.getElementById('pw-in');
btn.addEventListener('click', () => {
const show = field.type === 'password';
field.type = show ? 'text' : 'password';
btn.textContent = show ? 'Hide' : 'Show';
btn.setAttribute('aria-pressed', String(show));
});
07. Input with Prefix and Suffix
FormAddon
Fields with fixed text attached, such as a currency before a price or a domain after a subdomain. The add-ons are plain spans inside a flex wrapper, focus styling moves to the wrapper with :focus-within, and the unit is also included in the label.
A review box that counts characters as you type and warns as you approach the limit. The counter is a polite live region that only announces at key thresholds, and the field grows with its content using field-sizing where the browser supports it.
const t = document.getElementById('rev'), c = document.getElementById('rev-c');
function upd() {
const left = t.maxLength - t.value.length;
c.textContent = left + ' characters left';
c.classList.toggle('warn', left <= 20);
}
t.addEventListener('input', upd);
upd();
About these CSS Input Fields
Always keep a real label
Placeholders disappear as soon as you type, so they cannot replace a label. Every field here has a <label> linked by for and id. The floating label trick keeps that real label and only moves it, using :placeholder-shown with a single-space placeholder.
Use the right type and autocomplete
The input type chooses the mobile keyboard: email, tel, search or numeric through inputmode. The autocomplete attribute, such as email, current-password or one-time-code, lets browsers and password managers fill fields correctly, which saves people time and mistakes.
Errors people can act on
An error message should say how to fix the problem, sit next to the field and be linked with aria-describedby. Add aria-invalid="true" so screen readers announce the field as invalid, and show the state with an icon and text as well as a red border.
Focus styles
Removing the default outline without a replacement makes a form unusable with a keyboard. These demos replace it with a coloured border and a soft ring, or a thicker underline, that is clearly visible on the page background.
Frequently asked questions
Which fields use JavaScript?
The one-time code, password toggle and character counter use a few lines of JavaScript. The others are pure CSS.
Does the floating label work with autofill?
Yes. Autofilled values make :placeholder-shown false, so the label floats above the value.
How do I add an icon inside an input?
Position the icon absolutely inside a relative wrapper and add padding to the input, as in the search demo.