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

0

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

Share.

About Author

Comments are closed.