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
Links
Made with
- HTML / CSS (SCSS)
About a code
CSS Editable Letter Board
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
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: -
Links
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: -
Links
Made with
- HTML (Pug) / CSS (Stylus)
About a code
Pure CSS Authentication
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies:
Links
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: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Input Text
Input text material with gradient.
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
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: -
Links
Made with
- HTML / CSS
About a code
Material Input Text Fields
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Jumping Input Text
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
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: -
Links
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: -
Links
Made with
- HTML / CSS (Stylus)
About a code
Elastic Validation
Compatible browsers: Chrome, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS (Stylus)
About the code
input:not(:placeholder-shown)
It looks kinda similar to the text inputs of the framework Materialize.

Links
Made with
- HTML
- CSS (bootstrap.css)
About the code
Form Input Design
Form input designs with hover and focus.

Links
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.

Links
Made with
- HTML
- CSS/SCSS
About the code
CSS Only Floated Labels
A CSS only approach to the floated labels UI pattern.

Links
Made with
- HTML
- CSS
About the code
CSS Fields
Fields with CSS custom properties.
Links
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 thech
unit whose width is the width of the0
character. It also assumes the font in theinput
field is a monospace one so that all characters have the same width. So the width for every character is always1ch
. The gap between the characters is taken to be.5ch
. This is the value we set forletter-spacing
. Thewidth
of theinput
is the number of characters times the sum between the letter width (1ch
) and the gap width (.5ch
). So that's7*(1ch + .5ch) = 7*1.5ch = 10.5ch
. We remove the actualborder
of theinput
and we set a fake one using arepeating-linear-gradient
. The dash (dimgrey) goes from0
to1ch
and the gap (transparent
) starts immediately after the dash and goes to1.5ch
. It's attached to the left and the bottom of the input - this is thebackground-position
component (0%
horizontally and100%
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 is2px
tall - this is thebackground-size
component of thebackground
.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
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: -
Links
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: -
Links
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: -
Links
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: -
Links
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
Links
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: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Material Design Input Text
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
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: -
Links
Made with
- HTML / CSS (Sass)
About a code
Fancy Text Inputs
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML (Haml) / CSS (Less)
About the code
Adaptive Placeholder
Once activated, the input placeholders become input labels.
Links
Made with
- HTML / CSS (SCSS)
About a code
Text Input
I wanted to play with someinput
styles that don't rely on hover, don't add clutter, show thelabel
at all times, and showplaceholder
text when it is actually relevant.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -