When creating a form in the advance area change ID name to: styled_checkbox as seen on the above image ▼
Just a word of advice if your creating more than one form it might be wise to make the ID field more unique for the field for example if it’s on the contact page change it to styled_checkbox_contact_page_1 the number would be incase if you have more than one form on the page because if you use a generic name and two forms on the same page will change to a active state on both forms. for example see below by clicking on the bottom checkbox ▼
Before copy and pasting the code into elementors custom CSS Then to stylise the button whack this code in there.
/* Button shadow disable */
button, input[type="button"], input[type="reset"], input[type="submit"], #infinite-handle span, .button {
box-shadow: none;}
/* Make checkbox inline */
.elementor-field-type-checkbox
{display:inline-block;}
.elementor-field-type-checkbox .elementor-field-label
{position:absolute;
padding-left: 30px
}
/* Making checkbox and radio button invisible */
selector input[type="checkbox"], selector input[type="radio"] {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;}
/* For Checkbox */
.elementor-field-group-styled_checkbox > div label:before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
margin-right: 1em;
vertical-align: -4px;
border: none;
padding: 0.12em;
background-color: #fff;
transition: all 0.2s ease;
}
.elementor-field-group-styled_checkbox > div label {
margin-right: 1em;
position: relative;
}
/* checkbox - active tick styling */
.elementor-field-group-styled_checkbox > div label:after {
border-right: 2px solid #fff;
border-top: 2px solid #fff;
content: "";
height: 11px;
left: 4px;
position: absolute;
top: 14px;
transform: scaleX(-1) rotate(135deg);
transform-origin: left top;
width: 6px;
display: none;
}
/* checkbox border */
.elementor-field-group-styled_checkbox > div label::before {
border: 1px solid #4888EA;
}
/* checkbox hover state */
.elementor-field-group-styled_checkbox > div input:hover + label:before {
background-color: rgba(255, 255, 255, 0.74);
}
.elementor-field-group-styled_checkbox > div input:checked + label:before {
background: #0C8BD7;
}
/* Tick positioning */
.elementor-field-group-styled_checkbox > div input:checked + label:after {
-moz-animation: check 0.8s ease 0s running;
-webkit-animation: check 0.8s ease 0s running;
animation: check 0.8s ease 0s running;
display: block;
width: 6px;
height: 10px;
border-color: #fff;
}
@keyframes check {
0% {
height: 0;
width: 0;
}
25% {
height: 0;
width: 6px;
}
50% {
height: 10px;
width: 6px;
}
}
/* tick positioning tablet/mobile */
@media only screen and (max-width: 999px)
{.elementor-field-group-styled_checkbox > div label:before
{
vertical-align: -2px;
}}
If you want to make the code have a required field star then copy the code below:
Note when you apply the code the first part .elementor-2088 .elementor-element.elementor-element-7aa0175 you will have to find the top level of the checkbox div class finding it in the code inspect tool on your browser. The second part .elementor-field-option:after is a generic elementor code snippet for the checkbox.
/* star positioning */
.elementor-2088 .elementor-element.elementor-element-7aa0175 .elementor-field-option:after {
content:"*";
color: red;
margin-left:-15px;
}
All done 🙂 you can change the colour if needed. But best to have a play, it’s the best way to learn.
/* checkbox - active tick styling */
.elementor-field-group-styled_checkbox > div label:after {
border-right: 2px solid #fff;
border-top: 2px solid #fff;
content: "";
height: 11px;
left: 4px;
position: absolute;
top: 14px;
transform: scaleX(-1) rotate(135deg);
transform-origin: left top;
width: 6px;
display: none;
