40 Cool CSS Input Field Designs

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.

25 Amazing CSS Range Slider Designs

Range slider is a very intuitive user interface with one or two handles to allows user to choose a value within a limited range. The user drags a handle along one dimension to set a value. A typical slider usually can be found in color picker where we can drag the arrow left and right to pick the right RGB value. So here are 25 examples of CSS range sliders that will engage the user in an interactive and easy way of selecting a range of values.

25 Stylish Custom CSS Checkboxes and Radio Buttons

Styling checkboxes and radio buttons are widely considered a bad practice, but is often necessary, as the default styling is really poor and often doesn’t provide the functionality needed. So in this post we`ll try to showcase some of the creative things you can do with checkboxes & radio buttons.