Last active
September 16, 2017 17:50
-
-
Save anythinggraphic/b11eaa9b9fded05d515a534eb5e5e545 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
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