任意のテキストでチェックボックス

Ads

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

タイトルとURLをコピーしました