پیشنمایش زنده
کد HTML
<label class="checkbox-container">
<input type="checkbox" class="checkbox" name="checkbox" value="checkbox" />
<div class="checkmark">
<svg
width="23"
height="20"
viewBox="0 0 23 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M22.7601 1.72837C22.6079 1.91613 8.92915 19.1417 8.79063 19.3192C8.46874 19.7242 8.01793 19.968 7.53726 19.9971C7.05659 20.0261 6.58538 19.8381 6.22719 19.4742C6.15032 19.3945 6.07907 19.3081 6.01408 19.2158L0.267659 10.9475C0.0962799 10.7536 -1.35132e-08 10.4905 0 10.2163C1.35132e-08 9.94201 0.0962799 9.67898 0.267659 9.48505C0.439039 9.29112 0.671479 9.18217 0.913846 9.18217C1.15621 9.18217 1.38865 9.29112 1.56003 9.48505L7.34451 14.6321L21.4647 0.272796C22.3385 -0.572982 23.5106 0.727565 22.7601 1.72837Z"
></path>
</svg>
</div>
</label>
<label class="checkbox-container" style="margin-left: 1rem">
<input
type="checkbox"
checked=""
class="checkbox"
name="checkbox"
value="checkbox"
/>
<div class="checkmark">
<svg
width="23"
height="20"
viewBox="0 0 23 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M22.7601 1.72837C22.6079 1.91613 8.92915 19.1417 8.79063 19.3192C8.46874 19.7242 8.01793 19.968 7.53726 19.9971C7.05659 20.0261 6.58538 19.8381 6.22719 19.4742C6.15032 19.3945 6.07907 19.3081 6.01408 19.2158L0.267659 10.9475C0.0962799 10.7536 -1.35132e-08 10.4905 0 10.2163C1.35132e-08 9.94201 0.0962799 9.67898 0.267659 9.48505C0.439039 9.29112 0.671479 9.18217 0.913846 9.18217C1.15621 9.18217 1.38865 9.29112 1.56003 9.48505L7.34451 14.6321L21.4647 0.272796C22.3385 -0.572982 23.5106 0.727565 22.7601 1.72837Z"
></path>
</svg>
</div>
</label>
کد CSS
.checkbox-container {
--checkbox-size: 32px;
--border-radius: 50%;
--primary-color: #ffc008;
--checkmark-color: #593f28;
display: block;
position: relative;
cursor: pointer;
user-select: none;
border-radius: var(--border-radius);
}
/* Hide the default checkbox */
.checkbox-container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkbox-container .checkmark {
position: relative;
top: 0;
left: 0;
height: var(--checkbox-size);
width: var(--checkbox-size);
background-color: #e9eaeb;
border-radius: inherit;
border: 1px solid #d5d7da;
}
.checkbox-container .checkmark:before {
content: "";
position: absolute;
inset: 15%;
background: white;
border-radius: inherit;
box-shadow:
0px 1px 1.1px rgba(0, 0, 0, 0.12),
0px 10px 10px rgba(0, 0, 0, 0.12);
z-index: 1;
transition: scale 0.2s ease-in-out;
}
.checkbox-container .checkmark svg {
scale: 0;
fill: var(--checkmark-color);
rotate: -30deg;
position: relative;
width: 80%;
height: auto;
z-index: 2;
left: 25%;
justify-content: center;
transform-origin: 25% 75%;
transition: all 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.checkbox-container:hover .checkmark:before {
scale: 1.1;
}
.checkbox-container:active .checkmark:before {
scale: 0.9;
}
/* When the checkbox is checked.... */
.checkbox-container input:checked ~ .checkmark {
background-color: var(--primary-color);
}
.checkbox-container input:checked ~ .checkmark svg {
scale: 1;
rotate: 0deg;
}