A Minified Stylesheet for Gravity Forms

Update! I’ve got a much better stylesheet for Gravity Forms these days, 9% faster than the built in Gravity Forms CSS and 150% more beautiful. Get it here, completely free!

If you’re all into performance, and if you’re building websites these days you really should be, and you use Gravity Forms on your site, you probably know that the two don’t play nicely together.

When used in conjunction with my has_gform(), though, you can really make a dent in the number of Javascript and CSS files loaded.

Below is simply an incredibly minified chunk of code which you can then build on as necessary, adding it to your own style.css instead of loading a separate stylesheet just for Gravity Forms. Remember to turn off CSS output in the Gravity Forms settings page.

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%; padding:15px; font-size:1em; outline:none; background:#eee; border:0; border-radius:2px;}
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:15px; appearance:none; background:#e68c11; color:white;}
input[type="reset"], input.gform_previous_button {background:#eee; color:black;}
input[type="search"] {appearance:none;}
textarea {min-height:200px; width:500px;}
select {padding: 10px; height: 28px; background:#eee;}
.h form.search-form {top: -5px;}
form.search-form input {width:130px; padding:5px 20px 5px 15px; background:white; float:right; transition:background 500ms;}
form.search-form input.in-use {width:250px;}
form.search-form input.in-use, form.search-form:hover input {background:#eee; transition:background 250ms, width 250ms;}
.search form.search-form {width:100%;}
.search .content form.search-form {margin-top:10px;}
.search .content form.search-form input {float:left; width:100%;}
form.search-form button {top:5px; right:5px; border:0; background:none; padding:0; box-shadow:none;}
form.search-form button:hover, form.search-form button:active {box-shadow:none;}
form.search-form button img {width:1.5em;}
span.gform_description {padding:20px 0; display:block; font-style:italic;}
.gf_step {float:left; margin-right:10px; min-height:40px;}
.gf_step:last-of-type {margin-right:0;}
.gf_step_number {font-weight:bold; font-size:1.2em; background:#ddd; color:black; padding:5px 10px; border-radius:15px;}
.gf_step_active .gf_step_number {font-weight:bold; font-size:1.2em; background:#000; color:white;}
.gf_step_pending .gf_step_number {opacity:0.4;}
ul.gform_fields {padding-left:0;}
.content ul.gform_fields li {list-style:none;}
.ginput_left {float:left; margin-right:15px; clear:left;}
li.gfield div label {font-size:0.8em; padding:0 0 20px 5px;}
.gf_clear, .gf_clear_complex {clear:both;}
.validation_error, .gfield_error .validation_message {background:red; margin:10px 0; padding:20px; color:white; text-shadow:1px 0px 0 black; border-radius:3px; border-bottom:3px solid maroon; letter-spacing:0;}
.gfield_error .validation_message:before {content:"\2191"; top:0; left:0; background:maroon; position:absolute; height:100%; padding:10px;}
.gfield_error .validation_message {padding:10px 20px 10px 45px; position:relative; overflow:hidden;}
li.gfield ul.gfield_radio label, li.gfield ul.gfield_radio li {padding-bottom:0;}
.gfield_description {font-style:italic; font-size: 0.8em;}
.gfield_description:before {content:"\2191"; padding-right:10px; font-style:normal;}
.gform_confirmation_message {position:relative; margin:20px 0; padding-left:40px;}
.gform_confirmation_message:before {content:" "; background:black; width:15px; height:5px; position:absolute; left:0; top:24px; transform:rotate(35deg);}
.gform_confirmation_message:after {content:" "; background:black; width:25px; height:5px; position:absolute; left:5px; top:19px; transform:rotate(-55deg);}
.gform_validation_container,
.gform_wrapper .gform_validation_container,
body .gform_wrapper li.gform_validation_container,
body .gform_wrapper .gform_body ul.gform_fields li.gfield.gform_validation_container,
body .gform_wrapper ul.gform_fields li.gfield.gform_validation_container {display:none !important; position:absolute !important; left:-999em;}
li.gfield div.ginput_complex label {padding-bottom:0;}
.clear-multi {width:180px; float:left;}
.clear-multi:after {content:"";display:table;clear:both;}
.gfield_time_hour, .gfield_time_minute {float:left; width:60px;}
.gfield_time_hour input, .gfield_time_minute input {width:45px; text-align:right; float: left; margin-right: .25em; margin-left: .25em;}
.gfield_time_ampm {float:left;}
.gfield_time_ampm select {font-size: .6em; background: black; color: white; padding: 1.15em 1em;}

There’s definitely room for improvement, and I’ll update this post as I find other things that could be refined even more, but I feel this is the perfect balance of very little file size and good looking form elements.

PS, you might also dig this additional minimal CSS for the Gravity Forms Stripe Add-on.

Up Next: The Proliferation of SPAM in the Web Design & SEO Industries