HTML&CSS) 체크박스 눌렀을때 라벨에 CSS 변경하기. input 체크시 라벨 스타일 변경, checkbox label 변경

체크박스나 라디오버튼의 input을 누르면 라벨 style을 변경하고 싶었다. 

 

예를들어 아래와 같은!

구글링 해보니 CSS에 + 연산자를 쓸 수 있었다. 

 

input[type=checkbox]:checked + label  { background-color: orange; }

 

 

근데... 동작하지 않았다. 

 

+ label 없애고 앞부분만 쓰면 잘 적용됐는데 "+ label" 만 붙이면 동작을 안했다. 

 

뭐가 문제지..

vue 프로젝트로 하고있는데 vue에서는 지원 안하는건지 이리저리 찾다가 원인을 찾았다. 

+label 을 하려면 <label> 태그가 <input>태그 뒤에 있어야 한다. 

 

계속 보다보니 다른 글에서는 다 label과 input이 따로따로였다. 

 

나는 label이 input을 감싼 상태였어서 적용이 안된거였다. 

내 코드
<label><input type="checkbox" name="level" id="k1" />가나다</label>
<label><input type="checkbox" name="level" id="k2" />라마바</label>
<label><input type="checkbox" name="level" id="k3" />사아자</label>
<label><input type="checkbox" name="level" id="k4" />차카타</label>

 

문득 드는 의문... 그럼 나같은 경우는 순서를 바꾸면되지 않나???ㅋㅋㅋ

 

input + label 이 아니고, label + input으로 CSS를 주면?!?!?!?!?

 

ㅋㅋㅋㅋㅋ 안됐다.... checked된 기준으로 label을 잡는거라 label이 뒤여야 하나보다..라는 생각이 든다.(추측)

 

 

<label>안에 <input>을 두면 id-for로 연결 안해도되서 귀찮음을 덜려고 안해 포함해뒀었는데, 

 

결국 input과 label을 분리하고 for로 연결했다. 

( ** label과 input 태그는 input의 id값과 label의 for값이 같으면 서로 연결된다! )

CSSc적용되도록 변경
<input type="checkbox" name="level" id="k1" /><label for="k1">가나다</label>
<input type="checkbox" name="level" id="k2" /><label for="k2">라마바</label>

 

input 뒤에 라벨을 두고 CSS 적용 하니 완성!

 

중요한건, label 이 input과 분리되야 하고, input뒤에 있어야 한다