[CSS] ✅ 체크박스 꾸미기

✅ 체크박스 꾸미기

👀 원리파악

1. 체크박스를 안보이게 한다
2. 대신 체크박스를 label로 연결시켜준다. (label을 클릭해도 체크박스클릭하는 효과를 얻기 위해)
3. 그 label을 꾸며준다.

🎃 필요한 개념

1. 속성선택자 + 상태선택자 + 인접선택자: input[class="check"]:checked

✔ 주로 a, button, input 등에 사용

• :hover 마우스 올렸을 때
• :active 활성화했을 때
• :visited (링크) 방문했을 때
• :focus 커서를 놓았을 때(input 활성화)

⛏ 예제

/* 체크박스 꾸미기 - 활성화 x */
input[class="check"] + label {
	display: inline-block;
	width: 18px;
	height: 18px;
	border: 1px solid #bcbcbc;
	cursor: pointer;
}

/* 체크박스 꾸미기 - 활성화 */
input[class="check"]:checked + label {
    background-image:url("../../img/check.png");
    background-size: 100%;
    border: 1px solid #fff;
}

/* input 안보이게 */
.check{
    position: absolute;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    overflow: hidden;
}

<input type="checkbox" name="check" id="input0" class="check">
<label class="check_label"></label>
<input type="checkbox" name="check" id="input1" class="check">
<label class="check_label"></label>
<input type="checkbox" name="check" id="input2" class="check">
<label class="check_label"></label>
<input type="checkbox" name="check" id="input3" class="check">
<label class="check_label"></label>