TOP 24 CSS Input Text

INPUT TEXT

Input text material with gradient.

See the Pen Input Text Material with Gradient by Lucas Oliveira (@lucasyem) on CodePen.light

Author

  • Lucas Oliveira

Made with

  • HTML / CSS (SCSS)

INPUT GROUP

Input group :focus-within.

See the Pen Input group :focus-within by Aaron Iker (@aaroniker) on CodePen.light

Author

  • Aaron Iker

Made with

  • HTML / CSS (SCSS) / JS

MATERIAL INPUT TEXT FIELDS

See the Pen Material Input Text Fields by Fatma (@fatmali) on CodePen.light

Author

  • Fatma

Made with

  • HTML / CSS

JUMPING INPUT TEXT

See the Pen Jumping input text by Niklesh Tiwane (@nikstech) on CodePen.light

Author

  • Niklesh Tiwane

Made with

  • HTML / CSS

FORM LABEL SHOW AFTER INPUT TEXT

Form label show after input text only CSS.

See the Pen Form label show after input text only CSS by Fidalgo (@fidalgodev) on CodePen.light

Author

  • Fidalgo

Made with

  • HTML / CSS

NOTIFY ME

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

See the Pen Notify me by bertdida (@bertdida) on CodePen.light

Author

  • bertdida

Made with

  • HTML / CSS (SCSS)

ELASTIC VALIDATION

See the Pen Elastic Validation [Google Chrome] by Andreas Storm (@avstorm) on CodePen.light

Author

  • Andreas Storm

Made with

  • HTML / CSS (Stylus)

INPUT:NOT(:PLACEHOLDER-SHOWN)

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

See the Pen input :not(:placeholder-shown) by Andreas Storm (@avstorm) on CodePen.light

Author

  • Andreas Storm

Made with

  • HTML / CSS (Stylus)

FORM INPUT DESIGN

Form input designs with hover and focus.

See the Pen Form Input Designs onHover and onFocus by MAHESH AMBURE (@maheshambure21) on CodePen.light

Author

  • Mahesh

Made with

  • HTML
  • CSS (bootstrap.css)

INPUT FIELD GRADIENT BORDER FOCUS FUN

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

See the Pen Input Field Gradient Border Focus Fun by Rik Schennink (@rikschennink) on CodePen.light

Author

  • Rik Schennink

Made with

  • HTML
  • CSS/SCSS

CSS ONLY FLOATED LABELS

A CSS only approach to the floated labels UI pattern.

See the Pen CSS Only Floated Labels by Nick Salloum (@callmenick) on CodePen.light

Author

  • Nick Salloum

Made with

  • HTML
  • CSS/SCSS

CSS FIELDS

Fields with CSS custom properties.

See the Pen Field Animations with CSS Custom Properties by Stas Melnikov (@melnik909) on CodePen.light

Author

  • Stas Melnikov

Made with

  • HTML
  • CSS

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.

See the Pen input field with underline under each character by Ana Tudor (@thebabydino) on CodePen.light

Author

  • Ana Tudor

Made with

  • HTML / CSS (SCSS)

EMAIL INPUT FIELD

Just a nice little input field.

See the Pen Email Input Field by Dean Hidri (@visualcookie) on CodePen.light

Author

  • Dean Hidri

Made with

  • HTML / CSS (SCSS)

INPUT TEXT/PASSWORD ANIMATION

Only CSS input text/password animation.

See the Pen CSS3 Input Text/Password Animation by brayden cha (@chataehyeon) on CodePen.light

Author

  • brayden cha

Made with

  • HTML / CSS (SCSS)

MINIMAL MATERIAL DESIGN FORM INPUT

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

See the Pen Minimal Material Design Form Input by Kyle Lavery (@kylelavery88) on CodePen.light

Author

  • Kyle Lavery

Made with

  • HTML (Pug) / CSS (SCSS)

CSS-ONLY MATERIAL INPUTS

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

See the Pen CSS-only Material Inputs by Lewis Robinson (@lewisvrobinson) on CodePen.light

Author

  • Lewis Robinson

Made with

  • HTML (Pug) / CSS (SCSS)

WEBFLOW-STYLE EMAIL INPUT

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

See the Pen Webflow-style email input by Phil Rose (@PRtheRose) on CodePen.light

Author

  • Phil Rose

Made with

  • HTML / CSS (SCSS)

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!

See the Pen Nice, compliant input boxes by Andrew Tunnecliffe (@atunnecliffe) on CodePen.light

Author

  • Andrew Tunnecliffe

Made with

  • HTML / CSS

MATERIAL DESIGN INPUT TEXT

See the Pen Material Design Input Text by Ben Mildren (@mildrenben) on CodePen.light

Author

  • Ben Mildren

Made with

  • HTML / CSS (SCSS)

GOOGLE MATERIAL DESIGN INPUT BOXES

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

See the Pen Google Material Design Input Boxes by Chris on Code (@chrisoncode) on CodePen.light

Author

  • Chris Sevilleja

Made with

  • HTML / CSS

FANCY TEXT INPUTS

See the Pen Fancy Text Inputs by Alex Bergin (@abergin) on CodePen.light

Author

  • Alex Bergin

Made with

  • HTML / CSS (Sass)

ADAPTIVE PLACEHOLDER

Once activated, the input placeholders become input labels.

See the Pen Adaptive Placeholder by Danny King (@dannykingme) on CodePen.light

Author

  • Danny King

Made with

  • HTML (Haml) / CSS (Less)

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.

See the Pen Text input love by Michael Arestad (@MichaelArestad) on CodePen.light

Author

  • Michael Arestad

Made with

  • HTML / CSS (SCSS)

Post navigation