21 CSS Input Text

June 11, 2017

Collection of free HTML and CSS input text fields. Demo and download code (*zip).

Demo Image: Input Live Style Changer
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
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
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
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
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
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
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
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
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
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
Demo Image: Tags

Tags

Use Tab to input a tag.
Made by Ravi Dhiman
July 22, 2016

Demo Image: Input Field
Demo Image: Input Field

Input Field

Input with snap.svg & validation.
Made by Shehab Eltawel
July 20, 2016

Demo Image: Animated UI Text Input
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
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
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
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
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
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
Demo Image: Fancy Text Inputs

Fancy Text Inputs

Using the required hack.
Made by Alex Bergin
June 8, 2014

Demo Image: Text Input Love
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
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

FreeFrontend © 2016 - 2017

Back to top