Gravity Forms Stripe Add on Minified CSS
Update! I’ve got a vastly improved Gravity Forms stylesheet, including the credit card field, these days. 9% faster performance than the default GForms CSS and absolutely gorgeous. Get it for free here!
I’m a big fan of Gravity Forms, but don’t care all that much for the massive stylesheet(s) they tack on to their forms. To that end, here’s the latest installment of my “Minified Stylesheets for Gravity Forms” series.
This one specifically deals with the Gravity Forms Stripe Add-on (the official one from Gravity Forms themselves, requires a developers license).
Here’s the final product:

Here’s the CSS:
.gform_card_icon_container {margin-bottom:15px;}
.gform_card_icon_container:after {content:"";display:table;clear:both;}
.gform_card_icon_container div {float:left; padding:5px 10px; }
.gform_card_icon_container div:before {position:relative; top:10px; margin-right:5px;}
.gform_card_icon_amex:before {content:url(img/cc/amex.svg);}
.gform_card_icon_discover:before {content:url(img/cc/discover.svg);}
.gform_card_icon_mastercard:before {content:url(img/cc/mastercard.svg);}
.gform_card_icon_visa:before {content:url(img/cc/visa.svg);}
.gform_card_icon_container + input {width:560px;}
.gform_card_icon_container + input + label {margin-bottom:50px;}
.ginput_cardinfo_left {width: 180px; float:left;}
.ginput_cardinfo_right {top: -10px; position: relative;}
li.gfield span.ginput_card_expiration_container label {margin-top: 15px;}
.ginput_cardextras + span.ginput_full input {width: 432px; margin-top:30px;}
This calls a few SVG images, which can be downloaded here.
It also works particularly well with the font Open Sans and my minified Gravity Forms stylesheet.
Up Next: A Stroll Through Easy Digital Downloads: A Beginner's Guide