28 CSS Input Text
Collection of free HTML and CSS input type text code examples: placeholders, float labels, etc. Update of January 2018 collection. 2 new items.
Author
- Andreas Storm
About the code
input:not(:placeholder-shown)
It looks kinda similar to the text inputs of the framework Materialize.
About the code
Form Input Design
Form input designs with hover and focus.
Author
- Rik Schennink
About the code
Input Field Gradient Border Focus Fun
A gradient border on an input field that feathers out when focussed.
Author
- Nick Salloum
About the code
CSS Only Floated Labels
A CSS only approach to the floated labels UI pattern.
Made with
- HTML
- CSS/Sass
- JavaScript (jQuery.js)
About the code
Password Input Field
Password strength validation with visibility toggle.
Author
- Stas Melnikov
About the code
CSS Fields
Fields with CSS custom properties.
Demo Image: Input Live Style Changer
Input Live Style Changer
This input can change his style via 3 buttons to serious, modern or cheeky with a nice style animation.
Made by Benjamin Koehler
May 2, 2017
Demo Image: Input UI Animation
Input UI Animation
Input UI animation with HTML, CSS and JavaScript.
Made by Sasha
April 26, 2017
Demo Image: Dot Digit Input
Dot Digit Input
The nice input with dots that you fill.
Made by Godje
April 26, 2017
Demo Image: Email Input Field
Email Input Field
Email input field with HTML, CSS and JavaScript.
Made by Dean Hidri
April 25, 2017
Demo Image: Minimal Material Design Form Input
Minimal Material Design Form Input
Super easy and fully scalable Material Design form input. Change one variable to change the size of everything.
Made by Kyle Lavery
March 28, 2017
Demo Image: CSS-Only Material Inputs
CSS-Only Material Inputs
Material Design style input fields.
Made by Lewis Robinson
February 8, 2017
Demo Image: Email Input Validation
Email Input Validation
Email input validation behavior - JS and SCSS.
Made by Elior Tabeka
January 22, 2017
Demo Image: Tags Input
Tags Input
Separate your tags with a comma.
Made by Julien Dargelos
January 15, 2017
Demo Image: Fancy Animated Input Field
Fancy Animated Input Field
Fancy animated input field with HTML, CSS and JavaScript.
Made by Andy Pagès
November 7, 2016
Demo Image: Pixie Dust Input
Pixie Dust Input
Type to have the input generate pixie dust.
Made by Rik Schennink
October 27, 2016
Demo Image: Tags
Tags
Use Tab to input a tag.
Made by Ravi Dhiman
July 22, 2016
Demo Image: Input Field
Input Field
Input with snap.svg & validation.
Made by Shehab Eltawel
July 20, 2016
Demo Image: Animated UI Text Input
Animated UI Text Input
Expanding text input with HTML, CSS and JavaScript.
Made by Shehab Eltawel
May 12, 2016
Demo Image: Webflow-Style Email Input
Webflow-Style Email Input
Webflow-Style email input with HTML and CSS.
Made by Phil Rose
August 27, 2015
Demo Image: Nice Input Box
Nice Input Box
Nice input box with a lot of styling based on sibling selectors and psuedo classes. CSS only.
Made by Andrew Tunnecliffe
July 16, 2015
Demo Image: Morphing Input Field Button
Morphing Input Field Button
An email input field, styled to look like a button, that when clicked morphs into an email field.
Made by Caleb Sylvest
December 16, 2014
Demo Image: Google Material Design Input Boxes
Google Material Design Input Boxes
A CSS experiment to recreate the Google Material Design Polymer input boxes in CSS.
Made by Chris Sevilleja
July 24, 2014
Demo Image: Colored Tags
Colored Tags
Custom tagging system for describing an element.
Made by Jordan-Simonds
June 11, 2014
Demo Image: Fancy Text Inputs
Fancy Text Inputs
Using the required hack.
Made by Alex Bergin
June 8, 2014
Author
- Danny King
About the code
Adaptive Placeholder
Once activated, the input placeholders become input labels.
Demo Image: Text Input Love
Text Input Love
Playing 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.
Made by Michael Arestad
September 16, 2013
Demo Image: Fancy Input Field
Fancy Input Field
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.
Made by bartekd
January 31, 2013