40+ CSS Input Text - Free Code + Demos
Collection of 40+ CSS Input Text. All items are 100% free and open-source. The list also includes placeholders css input text.
1. Modern Style Input Text
Simple but yet modern look of input text fields. Tested and working in Google Chrome, Safari, Safari iOS and Firefox.
Author: Alexander Erlandsson (alexerlandsson)
Links: Source Code / Demo
Created on: February 10, 2015
Made with: HTML, Less, JS
Tags: input, label, form, login, text
2. Input Group :focus-within
Author: Aaron Iker (aaroniker)
Links: Source Code / Demo
Created on: August 15, 2019
Made with: HTML, SCSS, JS
3. Material Input Text Fields
Author: Fatma (fatmali)
Links: Source Code / Demo
Created on: August 14, 2019
Made with: HTML, CSS
4. Jumping Input Text
Author: Niklesh Tiwane (nikstech)
Links: Source Code / Demo
Created on: January 14, 2019
Made with: HTML, CSS
5. Form Label Show After Input Text Only CSS
Author: Fidalgo (fidalgodev)
Links: Source Code / Demo
Created on: December 9, 2018
Made with: HTML, CSS
6. Notify Me
Form validation using HTML required and pattern attributes together with CSS:required and :valid selectors. Design inspired by Oleg Frolov's work on dribbble: https://dribbble.com/shots/3072293-Notify-me
Author: bertdida (bertdida)
Links: Source Code / Demo, Dribbble Shot
Created on: October 15, 2018
Made with: HTML, SCSS, JS
Tags: button, email, form, subscription, switch
7. Elastic Validation [Google Chrome]
Author: Andreas Storm (andreasstorm)
Links: Source Code / Demo
Created on: July 20, 2018
Made with: HTML, Stylus
8. Input :not(:placeholder-shown)
Floating Material input with :not(:placeholder-shown)
Author: Andreas Storm (andreasstorm)
Links: Source Code / Demo
Created on: June 15, 2018
Made with: HTML, Sass
Tags: :placeholder-shown, input, :not(:empty), input empty, material input
9. Form Input Designs OnHover And OnFocus
Author: MAHESH AMBURE (maheshambure21)
Links: Source Code / Demo
Created on: January 24, 2018
Made with: HTML, CSS
10. Input Field Gradient Border Focus Fun
A gradient border on an input field that feathers out when focussed
Author: Rik Schennink (rikschennink)
Links: Source Code / Demo
Created on: December 12, 2017
Made with: HTML, SCSS
Tags: input, gradient, border, focus, fun
11. CSS Only Floated Labels
A CSS only approach to the floated labels UI pattern
Author: Nick Salloum (callmenick)
Links: Source Code / Demo
Created on: September 27, 2017
Made with: HTML, SCSS, Babel
Tags: css, floated, labels, transitions, transforms
12. Field Animations With CSS Custom Properties
Author: Stas Melnikov (melnik909)
Links: Source Code / Demo
Created on: June 17, 2017
Made with: HTML, CSS
Tags: fields, custom properties, ui, web-design, css
13. Input Field With Underline Under Each Character
Created to answer a SO question. 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 ...Read More
Author: Ana Tudor (thebabydino)
Links: Source Code / Demo
Created on: January 15, 2017
Made with: HTML, SCSS
14. Email Input Field
Author: Dean Hidri (visualcookie)
Links: Source Code / Demo, Dribbble Shot
Created on: September 28, 2016
Made with: HTML, SCSS
Tags: button, input, form, email
15. CSS3 Input Text/Password Animation
Author: brayden cha (chataehyeon)
Links: Source Code / Demo
Created on: June 8, 2016
Made with: HTML, SCSS
16. Minimal Material Design Form Input
Super easy and fully scalable Material Design form input. Change one variable to change the size of everything.
Author: Kyle Lavery (kylelavery88)
Links: Source Code / Demo
Created on: December 3, 2015
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: material design, sass
17. CSS-only Material Inputs
Material Design style input fields. I'll add more input types soon 🙂
Author: Lewis Robinson (lewisvrobinson)
Links: Source Code / Demo
Created on: June 24, 2016
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: material design, input-style, css-only, form-validation
18. 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!
Author: Andrew Tunnecliffe (atunnecliffe)
Links: Source Code / Demo
Created on: July 14, 2015
Made with: HTML, CSS
Tags: input, psuedo-class, sibling-selector, form, wcag
19. Material Design Input Text
Author: Ben Mildren (mildrenben)
Links: Source Code / Demo
Created on: March 9, 2015
Made with: HTML, SCSS
20. Google Material Design Input Boxes
A CSS experiment to recreate the Google Material Design Polymer input boxes in CSS. Tutorial Here: scotch.io
Author: Chris on Code (chrisoncode)
Links: Source Code / Demo
Created on: July 9, 2014
Made with: HTML, CSS
Tags: material design, css, forms
21. Fancy Text Inputs
Using the required hack
Author: Alex Bergin (abergin)
Links: Source Code / Demo
Created on: June 8, 2014
Made with: HTML, Sass
Tags: css, forms, input, html
22. Adaptive Placeholder
Once activated, the input placeholders become input labels.
Author: Danny King (dannykingme)
Links: Source Code / Demo
Created on: April 26, 2014
Made with: Haml, Less
CSS Pre-processor: Less
JS Pre-processor: None
HTML Pre-processor: Haml
Tags: adaptive, placeholder, input, label
23. 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.
Author: Michael Arestad (MichaelArestad)
Links: Source Code / Demo
Created on: August 8, 2013
Made with: HTML, SCSS
Tags: input, css, efficient, text-input
24. CSS Input Text Box
Simple text box with an animation on focus
Author: Aditya Bhandari (takeradi)
Links: Source Code / Demo
Created on: March 1, 2016
Made with: HTML, SCSS
Tags: pure-css, textbox, css
25. HTML And CSS Only Login Form With Tabs And Simple Input Animation
Watch the step by step tutorial in Youtube - https://www.youtube.com/watch?v=dok2xAaheWk
Author: Yor (yorsaquing)
Links: Source Code / Demo
Created on: August 25, 2020
Made with: HTML, SCSS
Tags: tabs, form, input, css, html
26. Aks İnput
Author: Ahmet Aksungur (ahmetaksungur)
Links: Source Code / Demo
Created on: August 27, 2020
Made with: HTML, CSS
Tags: aks, input, radio, button, checkbox
27. Playing With Inputs
Author: savwiley (savwiley)
Links: Source Code / Demo
Created on: August 20, 2020
Made with: HTML, CSS
Tags: button, field, password, input
28. Animation Inputs With HTML CSS / Hover Gradient
By Ruben Vardanyan
Author: Ruben Vardanyan (ruben-vardanyan)
Links: Source Code / Demo
Created on: August 11, 2020
Made with: HTML, CSS
Tags: animation, input, button, inputs, gradientborder
29. Form Group Search Css
a simple for input group using button input text, select option and button
Author: Fauzan Ahmad (_fauzanahmad_)
Links: Source Code / Demo
Created on: August 9, 2020
Made with: HTML, CSS
Tags: select, button, input, css, animation
30. Input Icon W Focus Effect
Author: UbaidRussell (UbaidRussell)
Links: Source Code / Demo
Created on: July 27, 2020
Made with: HTML, CSS
Tags: hover, input, icon, focus, effect
31. Neumorphic Inset Input
Author: Alex Sommers (al_somz7)
Links: Source Code / Demo
Created on: July 18, 2020
Made with: HTML, SCSS
Tags: neumorphic, inset, form, scss, input
32. Search Input Caret Jump
A search input animation in which the magnifying glass handle flies off, becomes a caret, and plants itself into the field.
Author: Jon Kantner (jkantner)
Links: Source Code / Demo
Created on: July 21, 2020
Made with: HTML, CSS
Tags: formcontrols, input, search, text
33. Wordpress Login Concept
A re-imagined login screen for Wordpress CMS with a linear-gradient background. The logo is copied from Wikipedia and recolored right here in the pen. https://upload.wikimedia.org/wikipedia/commons/0/09/Wordpress-Logo.svg
Author: Håvard Brynjulfsen (havardob)
Links: Source Code / Demo
Created on: April 29, 2020
Made with: HTML, SCSS
Tags: login, input, button, wordpress
34. Input Animation CSS
Author: webcrafters (webcrafterscz)
Links: Source Code / Demo
Created on: December 17, 2018
Made with: HTML, CSS
35. Animated Input Labels
inpired by: http://littlebigdetails.com/post/82478225432/circleci-once-activated-the-input-placeholders
Author: Ziafat Ali (ziafatali)
Links: Source Code / Demo
Created on: July 12, 2020
Made with: HTML, Stylus
Tags: css, input, label, placeholders, animation
36. Input Icon W Focus Effect
Author: UbaidRussell (UbaidRussell)
Links: Source Code / Demo
Created on: July 27, 2020
Made with: HTML, CSS
Tags: hover, input, icon, focus, effect
More Awesome Lists:
Share: