Style your Gravity Forms checkbox & radio fields into buttons with CSS
We’ve had a few JetSloth customers ask us to help with styling their radio and checkbox fields to look more like buttons. This goes hand in hand with our Gravity Forms Image Choices add-on. So we’ve finally spent some time on a quick tutorial/helpful resources to allow you to do this. Style your Gravity Forms checkbox & radio fields into buttons with CSS.
Live Demo Gravity Forms custom CSS
The demo below shows how with some clever custom CSS, you can make your ordinary-looking radio and checkbox fields, look more modern and responsive. You can easily update the CSS to change the feature color from blue to your own custom color. The same goes with the light grey.
CSS Note
For best results, please use a newer version of Gravity Forms 2.5+ and the new markup it provides.
Using Gravity Forms CSS column classes
To simplify things, we’ve used the default inbuilt Gravity Forms CSS column classes to get the 2 col and 3 col layout effect. Just add those into your appearance tab on each field group.
Gravity Forms 2.5+ CSS
Use the below CSS if you’re using a newer version of Gravity Forms with the new markup enabled.
.gchoice {
z-index:1;
position:relative;
margin:0 0 10px 0;
padding:0;
height:70px;
width: 100%!important;
}
input.gfield-choice-input {
z-index:2;
appearance:none;
margin:0;
padding:0;
width: 100%;
border-radius: 5px;
height:100%;
background: white;
transition: .3s all ease-in-out;
position:absolute;
background:#dfe1e5;
position:absolute;
}
input.gfield-choice-input:hover,
.gchoice label:hover {
cursor:pointer;
}
input.gfield-choice-input:checked {
background:#1273e6;
}
input.gfield-choice-input:checked + label {
color:white;
}
.gchoice label {
z-index:3;
font-weight:700;
color:#141c25;
display:block;
position: absolute;
padding: 0 0 0 30px;
top: 50%;
transform: translateY(-50%);
width:100%;
overflow:visible;
}
input.gfield-choice-input + label:after {
content: "";
position: absolute;
right: -10px;
transform: translateY(-50%);
width: 30px;
height: 30px;
border: 2px solid #c5c9d2;
z-index: 2;
top: 50%;
transition: .3s all ease-in-out;
color: white;
font-size: 25px;
text-align: center;
line-height: 25px;
font-weight: 500;
}
input[type="checkbox"].gfield-choice-input + label:after {
border-radius: 5px;
}
input[type="radio"].gfield-choice-input + label:after {
border-radius:50px;
}
input.gfield-choice-input:checked + label:after {
content: "\00D7";
border: 2px solid white;
}In Summary Gravity Forms custom CSS
We had a blast putting these examples together. With some small CSS tweaks, you can achieve pretty much any style you’d like, to help suit the design and theme of your overall website. Just remember to use those Gravity Forms CSS column classes to help do the heavy lifting with layouts.
Let us know if you love this stuff and we’ll keep making it!
