HTML forms are very versatile and allow you to submit a wide range of different types of input. Input fields are what allow your users to fill in your form. Depending on what information you ask, there are various types of fields – text fields, range slider, color, dropdowns, check boxes, radio buttons, datepickers and others. So here are some really cool CSS input field designs for inspiration to create fully accessible, customizable and functional input fields.

How Many Steps Does It Take To Get From Me To You?

Pen By Jase

3D cube form

Pen By Clement Roche

Web Launch Checklist

Pen By Alex Konstantinov

Custom checkboxes with CSS only

Pen By Geoffrey Crofte

Completely CSS: Custom checkboxes, radio buttons and select boxes

Pen By Kenan Yusuf

Range Input: change live value

Pen By Jorge Epunan

Animated Radio Inputs

Pen By simurai

Pure CSS toggle buttons

Pen By Mauricio Allende

CSS Star Ratings with Radio Buttons

Pen By Lenny Sirivong

Step by step register form

Pen By Jerome Renders

Gradient Range Slider

Pen By Eric Grucza

Day 5: Scalable 3D Range Sliders

Pen By Angela He

DailyUI #022 – Search

Pen By Fabio Ottaviani

Pure CSS Delightful Checkbox Animation

Pen By Dylan Raga

Google Material Sliders

Pen By Leena Lavanya

Find one of 17000+ color names

Pen By David A.

CSS “Ripple/Wave” checkbox and radio button

Pen By Matt Sisto

Emoji rating

Pen By Bennett Feely

Pure CSS Toggles

Pen By Rafael Gonzalez

Nice, compliant input boxes

Pen By Andrew Tunnecliffe

CSS-only Todo List Checkbox Animation

Pen By Shaw

Dropp

Pen By Paulo Nunes

Form with SVG radio buttons

Pen By Angela Velasquez

Material Inspired Checkboxes and Radio Groups

Pen By Buddy Reno

Text input with relevant emoji sorted with deeplearning

Pen By Johan Haneveld

Pure CSS Option

Pen By Aron

Border-Radius Playground

Pen By Adam Kuhn

Pure Css “day and night” toggle

Pen By Benjamin Rethore

Custom range input slider with labels

Pen By Trevan Hetzel

Webflow-style email input

Pen By Phil Rose

input :not(:placeholder-shown)

Pen By Andreas Storm

Vertical input range cross-browser supported

Pen By Kunuk Nykjaer

Custom checkbox

Pen By Valery

Responsive CSS Tabs

Pen By Oliver Knoblich

Drawing with rotating concentric circles/

Pen By Mark Kahn

Modern, Usable, Responsive Sliders.

Pen By Simon Goellner

Interactive Sign Up Form

Pen By Riccardo Pasianotto

CSS Search Field Animation

Pen By Sebastian Popp

Floating Labels/Placeholders for Input Fields

Pen By Lucas Bebber

Settings

Pen By Gabrielle Wee