Skip to content

Instantly share code, notes, and snippets.

@anythinggraphic
Last active September 16, 2017 17:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anythinggraphic/b11eaa9b9fded05d515a534eb5e5e545 to your computer and use it in GitHub Desktop.
Save anythinggraphic/b11eaa9b9fded05d515a534eb5e5e545 to your computer and use it in GitHub Desktop.
/*
Original link http://www.templatemonster.com/blog/style-checkboxes-radio-buttons-css adapted to Gravity Forms.
Uses Font Awesome. Make sure to wrap labels in <span> like so:
<script type="text/javascript">
jQuery(function($) {
$(".gfield_checkbox label, .gfield_radio label").wrapInner("<span></span>")
});
</script>
*/
div .gform_wrapper ul.gfield_checkbox li {
overflow-y: visible;
}
div .gform_wrapper .gfield_checkbox li input[type=checkbox] {
display: none;
}
div .gform_wrapper .gfield_checkbox label {
position: relative;
}
div .gform_wrapper .gfield_checkbox li label {
margin-left: 36px;
}
div .gform_wrapper .gfield_checkbox label span::before,
div .gform_wrapper .gfield_checkbox label span::after {
content: '';
margin: auto;
position: absolute;
top: 0; bottom: 0;
}
div .gform_wrapper .gfield_checkbox label span::before {
background-color: rgba(0, 0, 0, .1);
height: 25px;
left: -35px;
-webkit-transition: background-color .2s;
-moz-transition: background-color .2s;
-ms-transition: background-color .2s;
-o-transition: background-color .2s;
transition: background-color .2s;
width: 25px;
}
div .gform_wrapper .gfield_checkbox label span:hover::before {
background-color: rgba(0, 0, 0, .2);
}
div .gform_wrapper .gfield_checkbox label span::after {
color: transparent;
content: '\f00c';
font-family: 'FontAwesome';
line-height: 15px;
top: 3px; left: -30px;
-webkit-transition: color .2s;
-moz-transition: color .2s;
-ms-transition: color .2s;
-o-transition: color .2s;
transition: color .2s;
}
div .gform_wrapper .gfield_checkbox input[type="checkbox"]:checked + label span::after {
color: #229bee;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment