[CSS] 라벨클릭으로 체크박스 다루기

 

input으로 체크박스를 만들고, label과 연결해주면

label을 클릭할때마다 체크박스를 활성화 할 수 있다.

{* html파일 *}
{* input에서 type을 지정해 checkbox를 만들고, label과 연결하기 위한 id를 만들어준다. *}
<input type="checkbox" id="chkBox"/>

{* label을 만들어주고, 연결하고 싶은 input의 id를 for요소에 적어준다. *}
<label for="chkBox">라벨 내용~</label>

 

많이 사용하는 체크박스 형식

{* css파일 *}
input {
  {* 원래 input 숨겨주기 *}
  display: none;
}

label {
  {* 라벨 텍스트 줄바꿈 열맞추기 *}
  display: block;
}

{* 사용자에게 보여줄 가상체크박스 만들기 *}
label::before {
  content: "";
  width: 16px;
  height: 16px;
  border: 1px solid gray;
}

{* input이 체크된 상태이면, 가상체크박스의 스타일을 변경하기 *}
input:checked + label::before {
  content: "";
  width: 16px;
  height: 16px;
  background-color: blue;
}