[Webデザイン]チェックボックススタイル



html
<input id="checkbox" type="checkbox">
<label for="checkbox">밥먹기</label>
css
input[type='checkbox'] {
  position: absolute;
  clip: rect(0, 0, 0, 0); /* 화면에 보여줄 영역 선택->숨기는 효과 */
}
input[type='checkbox'] + label::before {
  /* 사용할 체크박스 스타일*/
  content: '\a0'; /* 이스케이프 시퀀스 공백 */
  display: inline-block;
  width: 1em;
  height: 1em;
  color: white;
  background-color: white;
  border: 1px solid teal;
  border-radius: 0.2em;
  margin: 0.1em;
}

input[type='checkbox']:checked + label::before {
  content: '\2714'; /* 이스케이프 시퀀스 체크무늬 */
  background-color: teal;
  text-indent: 0.1em;
}
  • 元のチェックボックスを非表示(clipプロパティを使用)
  • 新しい四角形を作成する(仮想要素::beforeを使用する)
  • .
    チェック
  • で四角形
  • を変更する.
    Escapeシーケンス
    コンピュータ言語で使用される各種記号にコードを付与する.
    ユニバーサルコーディング