پیشنمایش زنده
کد HTML
<div class="checkbox-container-single">
<input class="hidden-checkbox" id="cb_single" type="checkbox" />
<label class="custom-checkbox-visual-only" for="cb_single">
<span class="checkbox-box">
<svg
viewBox="0 0 52 52"
xmlns="http://www.w3.org/2000/svg"
class="checkmark"
>
<circle
fill="none"
r="25"
cy="26"
cx="26"
class="checkmark-circle"
></circle>
<path
d="M14.1 27.2l7.1 7.2 16.7-16.8"
fill="none"
class="checkmark-check"
></path>
</svg>
</span>
</label>
</div>
کد CSS
.checkbox-container-single {
display: inline-block;
vertical-align: middle;
}
.hidden-checkbox {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.custom-checkbox-visual-only {
position: relative;
display: inline-flex;
cursor: pointer;
user-select: none;
}
.checkbox-box {
width: 30px;
height: 30px;
border: 2px solid #adb5bd;
border-radius: 6px;
display: inline-flex;
justify-content: center;
align-items: center;
background-color: #fff;
transition:
border-color 0.3s ease,
background-color 0.3s ease;
}
.checkmark {
width: 22px;
height: 22px;
stroke-width: 4;
stroke: white;
stroke-miterlimit: 10;
opacity: 0;
transform: scale(0.5);
transition:
opacity 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28),
transform 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.checkmark-circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 3;
stroke-miterlimit: 10;
stroke: #4caf50;
fill: none;
transition: stroke-dashoffset 0.6s cubic-bezier(0.65, 0, 0.45, 1);
}
.checkmark-check {
transform-origin: 50% 50%;
stroke-dasharray: 48;
stroke-dashoffset: 48;
transition: stroke-dashoffset 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.3s;
}
.hidden-checkbox:checked + .custom-checkbox-visual-only .checkbox-box {
background-color: #4caf50;
border-color: #4caf50;
}
.hidden-checkbox:checked + .custom-checkbox-visual-only .checkmark {
opacity: 1;
transform: scale(1);
}
.hidden-checkbox:checked + .custom-checkbox-visual-only .checkmark-circle {
stroke-dashoffset: 0;
}
.hidden-checkbox:checked + .custom-checkbox-visual-only .checkmark-check {
stroke-dashoffset: 0;
}
.custom-checkbox-visual-only:hover .checkbox-box {
border-color: #67bd6a;
}
.hidden-checkbox:focus + .custom-checkbox-visual-only .checkbox-box {
box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.4);
border-color: #4caf50;
}