Struggling to customize the CSS style of my Caldera forms on a WordPress site. My goal is to add a hover effect to the radio checklist fields. Currently, I've only managed to style the bullets and need help adding a hover effect to the fields themselves.
Check out the form here.
Here is the CSS code I have been using:
.caldera-grid input[type=checkbox]:hover,
.caldera-grid input[type=radio]:hover {
cursor: pointer;
}
input[type=radio]:before,
input[type=checkbox]:before {
font-family: FontAwesome !important;
font-size: px;
}
input[type=radio]:before {
content: '\f111';
border-radius: 50%;
padding: 0px 15px 0px 0px;
}
input[type=checkbox]:before {
content: '\f14a';
color: red;
background: red;
border-radius: 3px;
padding: 2px;
}
input[type=radio]:checked:before {
color: red;
}