28 CSS Input Text

Collection of Free Hand-Picked 28 CSS Input Text. The demo included Placeholders, Labels, Input borders, and Input background.

Author

  • Sikriti Dakua

Made with

  • HTML / SCSS / JS

Created on

  • February 09,2020

Updated on

  • April 13,2020

About the Code

Typing Suggestions

This simple interaction idea came into my mind on the last day. So I sat down and started working on it. And here’s the final result.

Useful Links:Live Demo | Download
Dependency:
Animation:yes

Author

  • Kyle Lavery

Made with

  • Pug / SCSS / JS

Created on

  • February 12,2016

Updated on

  • May 05,2017

About the Code

Fancy Material Design Form Input

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

Useful Links:Live Demo | Download
Dependency:jquery.js
Animation:yes

Author

  • Andy Pagès

Made with

  • HTML / SCSS / JS

Created on

  • August 19,2016

Updated on

  • November 07,2016

About the Code

Fancy Animated Input Field

I wanted to make a proper animated text input, with correct cursor usage.

Credit: Animate.css

Useful Links:Live Demo | Download
Animation:yes

Author

  • Aditya Bhandari

Made with

  • HTML / SCSS

Created on

  • March 01,2016

Updated on

  • March 03,2016

About the Code

Textbox /Text Input field Inspiration (Pure CSS)

Simple text box with an animation on focus

Useful Links:Live Demo | Download
Dependency:
Animation:yes

Author

  • Kabir Shah

Made with

  • HTML / CSS

Created on

  • March 15,2016

Updated on

  • March 15,2016

About the Code

Text Input Effects

From Codrops, put into ONE pen only!

Useful Links:Live Demo | Download
Dependency:
Animation:yes

Author

  • Guillaume Gaulard

Made with

  • HTML / SCSS / JS

Created on

  • September 12,2014

Updated on

  • September 22,2014

About the Code

Paper simulation of input text and password (non Polymer)

Normally support all modern browsers.

Tested with Chrome, Firefox, and IE8

Useful Links:Live Demo | Download
Animation:yes
Compatible Browsers:IE8+, Chrome, Safari, Opera, Firefox

Input Label

Author

  • Alyssa Nicoll

Made with

  • HTML / SCSS

Created on

  • March 24,2015

Updated on

  • June 08,2015

About the Code

Text Input Effects

Using transforms & transitions to animate the inputs hints be the input’s label.

Useful Links:Live Demo | Download
Dependency:normalize.css
Animation:yes

Author

  • Stepan Soroka

Made with

  • HTML / Sass / JS

Created on

  • August 20,2016

Updated on

  • November 26,2016

About the Code

input effects

Input effects using HTML CSS and minimum js/jq

Useful Links:Live Demo | Download
Dependency:jquery.js
Animation:yes

Author

  • Israel Morales

Made with

  • HTML / SCSS / JS

Created on

  • February 02,2017

Updated on

  • February 02,2017

About the Code

Clean Animated Input Labels

without placeholder attribute and focus selector to support IE 7-9

Useful Links:Live Demo | Download
Dependency:jquery.js
Animation:yes

Author

  • Michael Arestad

Made with

  • HTML / SCSS

Created on

  • August 08,2013

Updated on

  • October 19,2022

About the Code

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.

Useful Links:Live Demo | Download
Dependency:
Animation:yes

Author

  • Nicolás Parada

Made with

  • HTML / Sass / JS

Created on

  • July 09,2015

Updated on

  • August 17,2017

About the Code

Juro Input effect from Codrops

Useful Links:Live Demo | Download
Dependency:
Animation:yes

Author

  • Fidalgo

Made with

  • HTML / CSS

Created on

  • December 09,2018

Updated on

  • December 09,2018

About the Code

Form label show after input text only CSS

Useful Links:Live Demo | Download
Dependency:
Animation:yes

Author

  • w3tweaks

Made with

  • HTML / CSS

Created on

  • May 11,2023

Updated on

  • May 11,2023

About the Code

Input with Label Effects

Useful Links:Live Demo | Download
Dependency:
Animation:yes

Author

  • Nick Salloum

Made with

  • HTML / SCSS

Created on

  • September 27,2017

Updated on

  • September 15,2018

About the Code

CSS Only Floated Labels

A CSS-only approach to the floated labels UI pattern

Useful Links:Live Demo | Download
Dependency:

Author

  • Emil Devantie Brockdorff

Made with

  • HTML / CSS

Created on

  • August 31,2015

Updated on

  • August 31,2015

About the Code

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!

Useful Links:Live Demo | Download
Dependency:
Animation:yes

Author

  • James Thomas Almond

Made with

  • HTML / CSS

Created on

  • March 08,2016

Updated on

  • May 21,2016

About the Code

CSS transitions – Form label placeholders

Wanted to learn how this is done, so I did!

Useful Links:Live Demo | Download
Dependency:
Animation:yes

Input Background

Author

  • w3tweaks

Made with

  • HTML / CSS

Created on

  • May 11,2023

Updated on

  • May 11,2023

About the Code

Highlight on Focus

Useful Links:Live Demo | Download
Dependency:
Animation:yes

Author

  • w3tweaks

Made with

  • HTML / CSS

Created on

  • May 11,2023

Updated on

  • May 11,2023

About the Code

input background effects

Useful Links:Live Demo | Download
Dependency:
Animation:yes

Input Border

Author

  • Rik Schennink

Made with

  • HTML / SCSS

Created on

  • December 12,2017

Updated on

  • December 14,2017

About the Code

Input Field Gradient Border Focus Fun

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

Useful Links:Live Demo | Download
Dependency:

Author

  • w3tweaks

Made with

  • HTML / CSS

Created on

  • May 11,2023

Updated on

  • May 11,2023

About the Code

input border effects

Useful Links:Live Demo | Download
Dependency:
Animation:yes

Author

  • Osama

Made with

  • HTML / SCSS

Created on

  • March 03,2018

Updated on

  • March 03,2018

About the Code

Input Effects From Left, Right, Middle

Useful Links:Live Demo | Download
Dependency:
Animation:yes

Input Placeholder

Author

  • Hafiz

Made with

  • Pug / SCSS

Created on

  • October 16,2015

Updated on

  • October 16,2015

About the Code

Pure CSS Placeholder Animation

animate placeholder on focus

Useful Links:Live Demo | Download
Dependency:
Animation:yes

Author

  • Danny King

Made with

  • Haml / Less

Created on

  • April 26,2014

Updated on

  • March 01,2015

About the Code

Adaptive Placeholder

Once activated, the input placeholders become input labels.

Useful Links:Live Demo | Download
Dependency:
Animation:yes

Author

  • Rob Howells

Made with

  • HTML / SCSS / JS

Created on

  • May 25,2016

Updated on

  • September 12,2017

About the Code

Scaling text field placeholders

Useful Links:Live Demo | Download
Dependency:jquery.js
Animation:yes

Author

  • Emil Devantie Brockdorff

Made with

  • HTML / CSS

Created on

  • December 10,2014

Updated on

  • December 10,2014

About the Code

Hide Placeholder on focus

Useful Links:Live Demo | Download
Dependency: