Basic HTML5 Form Reset Stylesheet

Forms are a time consuming thing to style. Most sites have completely different form needs–from which elements are used to how they’re used–and most browsers render form elements like an ugly duckling who has been DNA-tested and will never magically grow into a swan.

With that in mind, I have put together a small chunk of CSS that I use on my projects that cleans forms up, makes them pretty, and makes it easy to modify things when necessary. Feel free to use the code below as you will:

form {margin:30px 0;}
fieldset {padding:20px 0;}
fieldset > * {padding-left:20px;}
fieldset legend {padding-left:0;}
label {display:block; padding:20px 0 0 5px;}
button, textarea, select[multiple], input[type="submit"], input[type="button"], input[type="reset"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="week"], input[type="number"], input[type="password"], input[type="search"], input[type="text"], input[type="time"], input[type="url"], input[type="tel"], input[type="time"] {width:250px; max-width:100%; border-radius:2px; border:1px solid #ccc; padding:10px; font-size:.8em; outline:none;}
select[multiple] {width:auto;}
input[type="week"], input[type="month"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="number"], input[type="time"] {width:150px; max-width:100%;}
input[type="checkbox"], input[type="radio"] {display:inline-block; padding-top:0; clear:left;}
input[type="checkbox"] + label, input[type="radio"] + label {display:inline-block;}
input[type="checkbox"]:before, input[type="radio"]:before {content:" "; display:block; width: 540px;
height: 1px;
position: relative;}
button, input[type="submit"], input[type="button"], input[type="reset"] {width:auto; padding:10px 20px; border-bottom:2px solid black; transition:box-shadow 250ms; appearance:none; background:#ccc;}
button:hover, input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover {box-shadow:0 0 10px 0 rgba(0,0,0,0.3); transition:box-shadow 50ms;}
button:active, input[type="submit"]:active, input[type="button"]:active, input[type="reset"]:active {box-shadow:0 0 1px 0 rgba(0,0,0,0.3); transition:box-shadow 50ms, border-bottom 50ms; position:relative; top:1px; border-bottom:1px solid black;}
input[type="search"] {appearance:none;}
textarea {min-height:200px;}

If you dig this, you may also be into my Form Ipsum, all HTML5 and older form elements in one form so you can test styling, etc.

Up Next: Form Ipsum: All Current HTML Form Elements for Your Web Development Pleasure