mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
78 lines
1.7 KiB
HTML
78 lines
1.7 KiB
HTML
<div class="checkbox-wrapper-65">
|
|
<label for="cbk1-65">
|
|
<input id="cbk1-65" type="checkbox">
|
|
<span class="cbx">
|
|
<svg viewBox="0 0 12 11" height="11px" width="12px">
|
|
<polyline points="1 6.29411765 4.5 10 11 1"></polyline>
|
|
</svg>
|
|
</span>
|
|
<span>Checkbox</span>
|
|
</label>
|
|
</div>
|
|
|
|
|
|
|
|
<style>
|
|
/* From Uiverse.io by PriyanshuGupta28 - Tags: checkbox, cool checkbox, circle-checkbox */
|
|
.checkbox-wrapper-65 *,
|
|
.checkbox-wrapper-65 ::after,
|
|
.checkbox-wrapper-65 ::before {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.checkbox-wrapper-65 .cbx {
|
|
position: relative;
|
|
display: block;
|
|
float: left;
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 4px;
|
|
background-color: #1c4780;
|
|
background-image: linear-gradient(#0f698d, #1d3c6b);
|
|
box-shadow: inset 0 1px 1px rgba(255,255,255,0.15), inset 0 -1px 1px rgba(0,0,0,0.15);
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.checkbox-wrapper-65 .cbx svg {
|
|
position: absolute;
|
|
top: 3px;
|
|
left: 3px;
|
|
fill: none;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
stroke: #fff;
|
|
stroke-width: 2;
|
|
stroke-dasharray: 17;
|
|
stroke-dashoffset: 17;
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
.checkbox-wrapper-65 .cbx + span {
|
|
float: left;
|
|
margin-left: 6px;
|
|
}
|
|
|
|
.checkbox-wrapper-65 {
|
|
user-select: none;
|
|
}
|
|
|
|
.checkbox-wrapper-65 label {
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.checkbox-wrapper-65 input[type="checkbox"] {
|
|
display: none;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.checkbox-wrapper-65 input[type="checkbox"]:checked + .cbx {
|
|
background-color: #606062;
|
|
background-image: linear-gradient(#2584d2, #1d52c1);
|
|
}
|
|
|
|
.checkbox-wrapper-65 input[type="checkbox"]:checked + .cbx svg {
|
|
stroke-dashoffset: 0;
|
|
transition: all 0.15s ease;
|
|
}
|
|
</style>
|