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