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

4517 ワード

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シーケンス
コンピュータ言語で使用される各種記号にコードを付与する.
ユニバーサルコーディング

Reference

この問題について([Webデザイン]チェックボックススタイル), 我々は、より多くの情報をここで見つけました https://velog.io/@tjdgus3160/체크박스-스타일

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

[伯俊]16174号跳躍王

2V - Vmware workstation to KVM