! Ten kod ma zastosowanie tylko gdy dasz go w edytorze elementora zakładka Zaawansowane -> Custom CSS danego elementu !
Aby stworzyć taki checkbox wklej poniższy kod:
/* Styles for checked and unchecked checkboxes and radios */
selector [type="checkbox"]:checked,
selector [type="checkbox"]:not(:checked),
selector [type="radio"]:checked,
selector [type="radio"]:not(:checked) {
position: absolute;
visibility: hidden;
}
/* style shape */
selector .elementor-field-option label {
display: block;
padding: 10px 30px; /* (top/bottom),(left/right) */
margin: 7px 0; /* (top/bottom),(left/right) */
font-size: 14px; /* option text size */
line-height: 1.4;
transition: 0.2s all;
color: #504E4E; /* text color */
cursor: pointer;
position: relative;
z-index: 2;
text-align: left; /* text position(center, right,left,justify */
}
/* Style circle */
selector .elementor-field-option label:after {
width: 18px;/* Width of the circle */
height: 18px;/* height of the circle */
content: "";
border: 1px solid #D1D7DC;/* circle Border size and color */
background-color: #fff;
background-image: url("https://filenewcreate.com/wp-content/uploads/2023/11/check-4.svg");
background-size: cover; /* Change check mark size */
background-repeat: no-repeat;
background-position: 0px 0px;/* Change check mark position */
border-radius: 50%;
z-index: 2;
position: absolute;
left: 0px; /*circle Position from the edge */
top: 50%; /* circle Position from the top edge */
transform: translateY(-50%);
cursor: pointer;
transition: all 200ms ease-in;
}
/* shape Styles when checked */
selector input:checked ~ label {
color: #504E4E !important;/* text color when checked */
}
/* circle Styles when checked */
selector input:checked ~ label:after {
background-color: #635AD9;/* circle */
border-color: #635AD9;/* circle */
}