Thanks to CSS & JS, styling inputs has become a whole lot easier, making your forms look more appealing and presentable. Whether you use them for searches, newsletter subscribes, emails, checkouts, an input’s design can increase the user experience and determine the success of your product.
Getting them right is always important. That’s why, when I need to style forms or single inputs, my go-to place is CodePen.
CSS Input Focused Animation
Pure CSS based input focused animation using some sibling magic.
See the Pen CSS Input Focused Animation by daniandl (@daniandl) on CodePen.
Pure CSS – Input Material Design
A simple Material Design based input using pure CSS.
See the Pen Pure CSS – Input Material Design by jorgebrunetto (@jorgebrunetto) on CodePen.
Expanding CSS Input Field
An expanding CSS input field when clicking on it.
See the Pen Expanding CSS Input Field by Mestika (@Mestika) on CodePen.
CSS Float Labels
A neat and simple animation done with CSS for labels that float when clicking in an input.
See the Pen CSS Float Labels by KhoaDinh (@KhoaDinh) on CodePen.
Email Input Validation Behavior – JS and SCSS
A cool animation for email validation input made with CSS and JS.
See the Pen Email Input Validation Behavior – JS and SCSS by eliortabeka (@eliortabeka) on CodePen.
Webflow-Style CSS Email Input
An CSS input based on the example from https://webflow.com/cms. Changed to make use of pseudo elements and flexbox layout.
See the Pen Webflow-Style CSS Email Input by PRtheRose (@PRtheRose) on CodePen.
Morphing Input Field Button
An email input field, styled to look like a button, that when clicked morphs into an email field.
See the Pen Morphing Input Field Button by calebsylvest (@calebsylvest) on CodePen.
Fancy Input Field Style
Trying to make input field that is a bit more fancy than the regular boring box. Works nicely on Chrome/FF/Safari but requires some tweaking on iOS and IE.
See the Pen Fancy Input Field Style by bartekd (@bartekd) on CodePen.
Fancy Text Inputs
Some fancy floating input labels using CSS and validation using the “required” attribute hack.
See the Pen Fancy Text Inputs by abergin (@abergin) on CodePen.
CSS Input With Snap.SVG & Validation
Rereating a neat dribbble shot using a cool input animation called Snap.svg
See the Pen CSS Input With Snap.SVG & Validation by shehab-eltawel (@shehab-eltawel) on CodePen.
Tags In Text Input
A simple way to add tags inside a text input using this example.
See the Pen Tags In Text Input by juliendargelos (@juliendargelos) on CodePen.
Input UI Animation
Generate an input using CSS and JS click on the “Add” buttond.
See the Pen Input UI Animation by sashatran (@sashatran) on CodePen.
Colored Tags
Custom tagging system for describing an element.
See the Pen Colored Tags by jexordexan (@jexordexan) on CodePen.
Fancy Animated Input Field
I wanted to make a proper animated text input, with correct cursor usage.
See the Pen Fancy Animated Input Field by andyNroses (@andyNroses) on CodePen.
Nice, compliant input boxes
Nice input box with a lot of styling based on sibling selectors and psuedo classes.
See the Pen Nice, compliant input boxes by atunnecliffe (@atunnecliffe) on CodePen.
CSS-Only Material Inputs
Material Design style input fields.
See the Pen CSS-Only Material Inputs by lewisvrobinson (@lewisvrobinson) on CodePen.
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 koenigsegg1 (@koenigsegg1) on CodePen.
Dot Digit Input
The nice input with dots that you fill. One of my YouTube subscribers asked me how to do that you can find that on some websites this cool thing. And I was wondering how they do that. Some messed up tricks and wacks and we got this. It also works on the phone
See the Pen Dot Digit Input by Godje (@Godje) on CodePen.
CSS Tags In Input
A cool way to display a 4 digit password using CSS & JS inputs.
See the Pen CSS Tags In Input by ravid7000 (@ravid7000) on CodePen.
CSS Input Live Style Changer
This input can change his style via 3 buttons to serious, modern or cheeky with a nice style animation.
See the Pen CSS Input Live Style Changer by Benny29390 (@Benny29390) on CodePen.
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 sevilayha (@sevilayha) on CodePen.
Pixie Dust Input
Type to have the input generate pixie dust.
See the Pen Pixie Dust Input by rikschennink (@rikschennink) on CodePen.
Email Input Field
An elegant and soft email input using CSS3.
See the Pen Email Input Field by visualcookie (@visualcookie) on CodePen.
Animated CSS Text Input UI
Awesome expanding text input animation using CSS and JS.
See the Pen Animated CSS Text Input UI by shehab-eltawel (@shehab-eltawel) on CodePen.
CSS Text Input Love
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 CSS Text Input Love by MichaelArestad (@MichaelArestad) on CodePen.