custom Hover CSS style on caldera forms - css

Question

I am trying to add custom css style to my caldera forms on a wordpress website.
what i am trying to achieve is to add a hover style to my fields of radio checklist
Right now i was only able to add style to the bullets ,I am currently stuck with adding a hover style to the fields
this is the link to the form
https://purdywordy.com/order-here/
This is the CSS that i have used
.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;
}

Answer 1

When inspected, your form (HTML) is structured like this:
<div class="radio">
<label>
<input type="radio">
</label>
</div>
Since you have used nested input inside of a label, you don't even need for/id attributes, but I am guessing that is automatically generated by the form. Btw, do you have control over the structure of HTML or the proposed form simply spits it out?
For your current structure, you could style it like this:
.radio:hover > label {
/* add the style for the label */
}
.radio:hover input[type="radio"] {
/* add the style for the radio button */
}
Whatever you need to apply the style to, "listen" for a hover on the parent and then target its direct children. You get the point.
EDIT: My bad. I have said that input is nested inside of label. Therefore, radio:hover > input will not target it. Omit the > and it will target any input inside div with the class .radio. Sorry for the possible confusion. You can learn more about CSS selectors and differences between them here.

Answer 2

This should work. Your radio buttons and labels sit inside a class of 'radio'. You can remove the .form-group reference here unless there are other places on the page that you don't want this styling to apply to.
.form-group .radio:hover {
cursor: pointer;
background-color: grey;
border: 2px solid blue;
border-radius: 5px;
// other hover properties
}