input-checkbox 꾸미기

**체크박스를 직접적으로 꾸미는 것은 어렵다.

따라서, 체크박스와 연결된 '라벨'을 만들어 꾸민다.

(라벨을 클릭하면 체크박스가 체크되고, 다시 클릭하면 체크가 해제되는 성질 이용)

 

1. 체크박스 만들기

: for 속성 이용 > 체크박스-라벨 연결

 

<input type="checkbox" id="cb1"/>

<label for="cb1"></label>

 

★★★

react에서는 for 대신 'htmlFor'을 사용할 것

 

2. 라벨 꾸미기

input[id="cb1"] + label {
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 2px solid #bcbcbc;
	cursor: pointer;
}

 

3. click 시 라벨 꾸미기

input[id="cb1"]:checked + label {
	background-color: #666666;
}

**hover >> input : hover

**체크된 후 hover >> input : checked : hover

 

4. 체크박스 숨기기

input[id="cb1"] {
	display: none;
}

 

 

 

※ 체크박스 옆 '글씨'를 클릭했을 때 '체크'되도록 하고 싶다면?

label 내에 span을 추가해서 label을 스타일링하면 된다.

( label에 글씨와 체크박스 스타일 모두 포함되는 것)

 

 

 

 

 

참고사이트

https://www.codingfactory.net/10710