TOP 24 CSS Input Text

May 30, 2020

INPUT TEXT

Input text material with gradient.

INPUT GROUP

Input group :focus-within.

MATERIAL INPUT TEXT FIELDS

JUMPING INPUT TEXT

FORM LABEL SHOW AFTER INPUT TEXT

Form label show after input text only CSS.

NOTIFY ME

Form validation using HTML required and pattern attributes together with CSS :required and :valid selectors.

ELASTIC VALIDATION

INPUT:NOT(:PLACEHOLDER-SHOWN)

It looks kinda similar to the text inputs of the framework Materialize.

FORM INPUT DESIGN

Form input designs with hover and focus.

INPUT FIELD GRADIENT BORDER FOCUS FUN

A gradient border on an input field that feathers out when focussed.

CSS ONLY FLOATED LABELS

A CSS only approach to the floated labels UI pattern.

CSS FIELDS

Fields with CSS custom properties.

INPUT FIELD WITH UNDERLINE UNDER EACH CHARACTER

Try deleting and writing something else in the input field. It uses the ch unit whose width is the width of the 0 character. It also assumes the font in the input field is a monospace one so that all characters have the same width. So the width for every character is always 1ch. The gap between the characters is taken to be .5ch. This is the value we set for letter-spacing. The width of the input is the number of characters times the sum between the letter width (1ch) and the gap width (.5ch). So that’s 7*(1ch + .5ch) = 7*1.5ch = 10.5ch. We remove the actual border of the input and we set a fake one using a repeating-linear-gradient. The dash (dimgrey) goes from 0 to 1ch and the gap (transparent) starts immediately after the dash and goes to 1.5ch. It’s attached to the left and the bottom of the input – this is the background-position component (0% horizontally and 100% vertically). It spreads across the entire input horizontally (100% in the ideal case, the input width minus the gap to take care of rendering issue in Chrome and Firefox) and is 2px tall – this is the background-size component of the background.

EMAIL INPUT FIELD

Just a nice little input field.

INPUT TEXT/PASSWORD ANIMATION

Only CSS input text/password animation.

MINIMAL MATERIAL DESIGN FORM INPUT

Super easy and fully scalable Material Design form input. Change one variable to change the size of everything.

CSS-ONLY MATERIAL INPUTS

Inspired by Google’s Material Design guidelines for text fields.

WEBFLOW-STYLE EMAIL INPUT

Based on the input on https://webflow.com/cms. Changed to make use of pseudo elements and flexbox layout.

NICE, COMPLIANT INPUT BOXES

Nice input box with a lot of styling based on sibling selectors and psuedo classes. CSS only, and WCAG 2.0 AA compliant!

MATERIAL DESIGN INPUT TEXT

GOOGLE MATERIAL DESIGN INPUT BOXES

A CSS experiment to recreate the Google Material Design Polymer input boxes in CSS.

FANCY TEXT INPUTS

ADAPTIVE PLACEHOLDER

Once activated, the input placeholders become input labels.

TEXT INPUT

I wanted to play with some input styles that don’t rely on hover, don’t add clutter, show the label at all times, and show placeholder text when it is actually relevant.