Sometimes Customizing radio and checkbox inputs complicates our work a bit, but with this method we can implement it perfectly almost anywhere, even with the complicated structure of Contact Form 7
We are going to apply the styles to the :after and :before pseudo-elements of the label associated with each input, depending on whether it has the checked property (if it is checked) or not.
And why don’t we style the input pseudo-elements directly? It would be the best option, but some browsers (Firefox & Edge) don’t recognize the :after and :before pseudo-elements in the input.
The HTML structure is very important, since later with CSS we can style the elements depending on how they are placed.
If we put the input and then the label or in some cases span as it is in the Contact form 7 we can create a style of type input:checked+label or input:checked+span that will only be applied when the input is checked.
<input type="checkbox" id="check1" ><label for="check1">Check me!</label>
With radio type inputs the same, first we put the input and then the label or span
<input type="radio" id="radio1"><label for="radio1">Radio 1</label>
<input type="radio" id="radio2"><label for="radio2">Radio 2</label>
Then we begin to add little by little the styles
input[type="checkbox"] + label { color: red; }
And with the selector of the :checked pseudo-class we can modify the styles of the label when the input is checked.
input[type="checkbox"]:checked + label {
color: blue;
}
input[type="checkbox"]:checked + label:after {
content: "";
width: 12px;
height: 6px;
border: 4px solid #0fbf12;
float: left;
margin-left: -1.95em;
border-right: 0;
border-top: 0;
margin-top: 1em;
transform: rotate(-55deg);
}
By adjusting the property margin-left we can cover the input, but we can also hide it and it won’t influence when checking it.
input[type="checkbox"] {
display: none;
}
input[type="checkbox"] + label {
font-weight: bold;
line-height: 3em;
color: #ccc;
}
input[type="checkbox"]:checked + label {
color: #0fbf12;
}
For radio-type inputs it would be exactly the same, the only thing to keep in mind is that they are usually round…
This is easily fixed by adding the border-radius property to the :before pseudo-element:
input[type="radio"]{ display:none; }
input[type="radio"]+label:before {
content: "";
width: 20px;
height: 20px;
float: left;
margin: 0.3em 0.5em 0 0;
border: 2px solid #ccc;
background: #fff;
border-radius: 100%;
}
input[type="radio"]:checked + label:after {
content: "";
width: 0;
height: 0;
border: 8px solid #0fbf12;
float: left;
margin-left: -2.15em;
margin-top: 1em;
border-radius: 100%;
}
So now we know how to customize radio and checkbox inputs. To do it in Contact Form 7, simply change the label to span in the css and that’s it.
