Collection of free HTML and CSS input type text code examples: placeholders, float labels, etc. Update of December 2019 collection. 5 new items.


Related Articles

  1. JavaScript Input Text
  2. jQuery Input Text
  3. React Input Text
  4. Vue Input Text


Author

  • Anyssa Ferreira

Made with

  • HTML / CSS (SCSS)

About a code

CSS Editable Letter Board

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • David A.

Made with

  • HTML / CSS (SCSS)

About a code

CSS Vars Styling

CSS vars styling for <input type="text" />.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Shannon Moeller

Made with

  • HTML / CSS

About a code

Combobox

A fixed list combo box is when a user can type a certain string, and there is a list of strings that is designed to help the user arrive at a value. Try it out!

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Jhey

Made with

  • HTML (Pug) / CSS (Stylus)

About a code

Pure CSS Authentication

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Author

  • Jouan Marcel

Made with

  • HTML (Pug) / CSS (Sass)

About a code

3D Textbox

3D textbox form input box. It uses transform: rotate for the sides and for the overall rotation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Lucas Oliveira

Made with

  • HTML / CSS (SCSS)

About a code

Input Text

Input text material with gradient.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Aaron Iker

Made with

  • HTML / CSS (SCSS) / JS

About a code

Input Group

Input group :focus-within.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Fatma

Made with

  • HTML / CSS

About a code

Material Input Text Fields

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Niklesh Tiwane

Made with

  • HTML / CSS

About a code

Jumping Input Text

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Fidalgo

Made with

  • HTML / CSS

About a code

Form Label Show After Input Text

Form label show after input text only CSS.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • bertdida

Made with

  • HTML / CSS (SCSS)

About a code

Notify Me

Form validation using HTML required and pattern attributes together with CSS :required and :valid selectors.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Andreas Storm

Made with

  • HTML / CSS (Stylus)

About a code

Elastic Validation

Compatible browsers: Chrome, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: input:not(:placeholder-shown)

Author

  • Andreas Storm

Made with

  • HTML / CSS (Stylus)

About the code

input:not(:placeholder-shown)

It looks kinda similar to the text inputs of the framework Materialize.

Demo image: Form Input Design

Author

  • Mahesh

Made with

  • HTML
  • CSS (bootstrap.css)

About the code

Form Input Design

Form input designs with hover and focus.

Demo image: Input Field Gradient Border Focus Fun

Author

  • Rik Schennink

Made with

  • HTML
  • CSS/SCSS

About the code

Input Field Gradient Border Focus Fun

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

Demo image: CSS Only Floated Labels

Author

  • Nick Salloum

Made with

  • HTML
  • CSS/SCSS

About the code

CSS Only Floated Labels

A CSS only approach to the floated labels UI pattern.

Demo image: CSS Fields

Author

  • Stas Melnikov

Made with

  • HTML
  • CSS

About the code

CSS Fields

Fields with CSS custom properties.

Author

  • Ana Tudor

Made with

  • HTML / CSS (SCSS)

About a code

Input Field With Underline Under Each Character

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 character is always 1ch. The gap between the characters is taken to be .5ch. This is the value we set for letter-spacing. The width of the input is the number of characters times the sum between the letter width (1ch) and the gap width (.5ch). So that's 7*(1ch + .5ch) = 7*1.5ch = 10.5ch. We remove the actual border of the input and we set a fake one using a repeating-linear-gradient. The dash (dimgrey) goes from 0 to 1ch and the gap (transparent) starts immediately after the dash and goes to 1.5ch. It's attached to the left and the bottom of the input - this is the background-position component (0% horizontally and 100% vertically). It spreads across the entire input horizontally (100% in the ideal case, the input width minus the gap to take care of rendering issue in Chrome and Firefox) and is 2px tall - this is the background-size component of the background.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Email Input Field

Author

  • Dean Hidri

Made with

  • HTML / CSS (SCSS)

About a code

Email Input Field

Just a nice little input field.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • brayden cha

Made with

  • HTML / CSS (SCSS)

About a code

Input Text/Password Animation

Only CSS input text/password animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Kyle Lavery

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Minimal Material Design Form Input

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Lewis Robinson

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

CSS-Only Material Inputs

Inspired by Google's Material Design guidelines for text fields.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Phil Rose

Made with

  • HTML / CSS (SCSS)

About a code

Webflow-Style Email Input

Based on the input on https://webflow.com/cms. Changed to make use of pseudo elements and flexbox layout.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: ionicons.css

Author

  • Andrew Tunnecliffe

Made with

  • HTML / CSS

About a 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!

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Ben Mildren

Made with

  • HTML / CSS (SCSS)

About a code

Material Design Input Text

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Chris Sevilleja

Made with

  • HTML / CSS

About a code

Google Material Design Input Boxes

A CSS experiment to recreate the Google Material Design Polymer input boxes in CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Alex Bergin

Made with

  • HTML / CSS (Sass)

About a code

Fancy Text Inputs

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Adaptive Placeholder

Author

  • Danny King

Made with

  • HTML (Haml) / CSS (Less)

About the code

Adaptive Placeholder

Once activated, the input placeholders become input labels.

Author

  • Michael Arestad

Made with

  • HTML / CSS (SCSS)

About a code

Text Input

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -