mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
89 lines
No EOL
2 KiB
HTML
89 lines
No EOL
2 KiB
HTML
<form class="my-form">
|
|
<div>
|
|
<input id="check-1" type="checkbox" />
|
|
<label for="check-1">Checkbox 1</label>
|
|
</div>
|
|
<div>
|
|
<input checked="" id="check-2" type="checkbox" />
|
|
<label for="check-2">Checkbox 2</label>
|
|
</div>
|
|
<div>
|
|
<input id="check-3" type="checkbox" />
|
|
<label for="check-3">Checkbox 3</label>
|
|
</div>
|
|
<div>
|
|
<input id="check-4" type="checkbox" />
|
|
<label for="check-4">Checkbox 4</label>
|
|
</div>
|
|
</form>
|
|
|
|
<style>
|
|
/* From Uiverse.io by cbolson - Tags: checkbox */
|
|
.my-form {
|
|
--_clr-primary: #666;
|
|
--_clr-hover: #f33195;
|
|
--_clr-checked: #127acf;
|
|
}
|
|
.my-form > div {
|
|
--_clr-current: var(--_clr-primary);
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
.my-form > div + div {
|
|
margin-block-start: 0.5rem;
|
|
}
|
|
.my-form label {
|
|
cursor: pointer;
|
|
color: var(--_clr-current);
|
|
transition: color 150ms ease-in-out;
|
|
}
|
|
|
|
/* styled checkbox */
|
|
.my-form input[type="checkbox"] {
|
|
appearance: none;
|
|
outline: none;
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
aspect-ratio: 1;
|
|
padding: 0.25rem;
|
|
background: transparent;
|
|
border: 1px solid var(--_clr-current);
|
|
border-radius: 2px;
|
|
display: grid;
|
|
place-content: center;
|
|
cursor: pointer;
|
|
}
|
|
.my-form input[type="checkbox"]::after {
|
|
content: "\2714";
|
|
opacity: 0;
|
|
transition: opacity 150ms ease-in-out;
|
|
color: var(--_clr-checked);
|
|
font-size: inherit;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.my-form label:hover,
|
|
.my-form input[type="checkbox"]:focus-visible,
|
|
.my-form input[type="checkbox"]:focus-visible + label,
|
|
.my-form input[type="checkbox"]:hover,
|
|
.my-form input[type="checkbox"]:hover + label {
|
|
--_clr-current: var(--_clr-hover);
|
|
}
|
|
.my-form input[type="checkbox"]:focus-visible::after,
|
|
.my-form input[type="checkbox"]:hover::after {
|
|
opacity: 0.5;
|
|
color: var(--_clr-hover);
|
|
}
|
|
|
|
.my-form input[type="checkbox"]:checked + label:not(:hover),
|
|
.my-form input[type="checkbox"]:checked:not(:hover) {
|
|
--_clr-current: var(--_clr-checked);
|
|
}
|
|
.my-form input[type="checkbox"]:checked::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
</style>
|
|
|