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.

NEW 🔥 Auto-Apply to 100's of Jobs With AI 🔥

👉 Click to visit: ApplyFox.ai

1. Modern Style Input Text

CSS Input Text - 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

CSS Input Text - 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

CSS Input Text - 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

CSS Input Text - 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]

CSS Input Text - 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)

CSS Input Text - 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

CSS Input Text - 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

CSS Input Text - 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

CSS Input Text - 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

CSS Input Text - 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

CSS Input Text - 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

CSS Input Text - 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

CSS Input Text - 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

CSS Input Text - 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

CSS Input Text - 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

CSS Input Text - 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

CSS Input Text - 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

CSS Input Text - 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

CSS Input Text - 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

CSS Input Text - 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

CSS Input Text - 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

CSS Input Text - 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