Result
任意のテキストとか任意のスタイルでオリジナルなチェックボックスを作れます
css
.text-checkbox {
display: block;
}
.text-checkbox input {
display: none;
}
.text-checkbox span {
font-family: monospace;
}
.text-checkbox .checked {
display: none;
}
.text-checkbox :checked ~ .checked {
display: inline-block;
}
.text-checkbox :checked ~ .unchecked {
display: none;
}
|
html
<label class="text-checkbox">
<input type="checkbox" name="one">
<span class="checked" aria-hidden="true">hoge</span>
<span class="unchecked" aria-hidden="true">huga</span>
<span class="label">hoge</span>
</label>
|
via
Text Only Checkboxes
