Skip to content

Instantly share code, notes, and snippets.

@noellesteegs
Created April 21, 2020 14:42
Show Gist options
  • Save noellesteegs/a7ca37b77b7dd0c3004de97338f7483a to your computer and use it in GitHub Desktop.
Save noellesteegs/a7ca37b77b7dd0c3004de97338f7483a to your computer and use it in GitHub Desktop.
Replace Contact Form 7's checkboxes and radio buttons with Divi's icon font
.wpcf7-checkbox .wpcf7-list-item input[type=checkbox],
.wpcf7-radio .wpcf7-list-item input[type=radio] {
visibility: hidden;
margin: 0;
width: 0!important;
}
input[type=checkbox] + .wpcf7-list-item-label,
input[type=radio] + .wpcf7-list-item-label {
font-size: initial;
font-weight: initial;
}
input[type=checkbox] + .wpcf7-list-item-label:hover,
input[type=radio] + .wpcf7-list-item-label:hover {
cursor: pointer;
}
input[type=checkbox] + .wpcf7-list-item-label:before,
input[type=radio] + .wpcf7-list-item-label:before {
font-family: "ETmodules" !important;
font-size: 30px;
position: relative;
top: 0.3em;
margin-right: 0.2em;
}
input[type=checkbox]+.wpcf7-list-item-label:before, input[type=radio]+.wpcf7-list-item-label:before {
top: 7px;
}
input[type=checkbox] + .wpcf7-list-item-label:before {
content: '\056';
}
input[type=checkbox] + .wpcf7-list-item-label:hover:before {
content: '\05a';
filter: alpha(opacity=40);
opacity: 0.4;
}
input[type=checkbox]:checked + .wpcf7-list-item-label:before {
content: '\05a';
color: #ffb060;
}
input[type=checkbox]:checked + .wpcf7-list-item-label:hover:before {
color: #ffb060;
filter: alpha(opacity=100);
opacity: 1;
}
input[type=radio] + .wpcf7-list-item-label:before {
content: '\05b';
}
input[type=radio] + .wpcf7-list-item-label:hover:before {
content: '\05c';
filter: alpha(opacity=40);
opacity: 0.4;
}
input[type=radio]:checked + .wpcf7-list-item-label:before {
content: '\05c';
color: #ffb060;
}
input[type=radio]:checked + .wpcf7-list-item-label:hover:before {
color: #ffb060;
filter: alpha(opacity=100);
opacity: 1;
}
.wpcf7-radio .wpcf7-list-item input[type=checkbox]:checked+.wpcf7-list-item-label,
.wpcf7-checkbox .wpcf7-list-item input[type=radio]:checked+.wpcf7-list-item-label {
font-weight: normal;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment