가상클래스 사용하여 checkbox 색 변경

위 사진 처럼 마우스를 올렸을 때(:hover) 글씨 + 체크박스 전부 색상이 바뀌게 표현하려고 한다

 

input[type=checkbox]:hover {
    color: rgb(48, 178, 48);
}
label:hover {
    color: rgb(48, 178, 48);
}

이렇게 코드를 작성해 보았는데...

 

결과는 이 모양 

:hover 가 아닌 그냥 색을 바꿀 수 있는지도 테스트 해봤는데도 요지부동이다

 

<div>
<input type="checkbox" id="checkbox1" class="checkBox">
<label for="checkbox1">Onion</label>
</div>

<div>
<label class="checkbox1"><input type="checkbox" class="checkBox"> Onion</label>
</div>

label 태그 안에 input 태그를 넣어서 클래스 지정해서 해봐도 소용이 없다 

 

스택오버플로우 참고하여 수정해봤다

 

역시나 원치 않던 모양

 

 

checkbox 가 아니라 네모 모양을 만들어서 클릭하면 체크 효과가 날 수 있게 뭐 그런 이벤트를 주는 건가...? 복잡하다 

다시 스택오버플로우를 꼼꼼히 찾아봐야겠다 

내가 생각했던 것과 같은 의견 발견 

 

그래도 javascript 없이 할 수 있는 방법을 계속 찾아봐야겠다 

많은 의견들을 보다 보니까 selector 뒤에 :before :after 등을 사용하는 것이 많은데 이것이 무엇을 의미하는지 언제 쓰이는지 잘 모르겠다 

 

checkbox 색상 하나를 변경하려고 해도 모르는 게 많으니 공부 할 게 진짜 꼬리에 꼬리를 무는... 가지뻗기 같은 이 공부법을 뭐라고 하더라 마인드맵? 학교 다닐 때 이런식으로 구조화 하는 것이 공부에 많이 도움이 되긴 했었다  

 

[급 생각의 시간]

이게 독학의 양면성인가... 한 가지를 습득하기 위해서 또 다른 몇 가지를 습득해야 하고 그러기 위해서는 더 많은 시간을 투자해야 한다는 것

빨리 돌아갈 수 있는 길이 있음에도 방법을 모르고 무조건 부딪혀야 하니 분명 낭비되는 시간들이 있을 것이고

또 다른 면에선, 시간을 두고 돌아가는 대신 쉽게 무너지지 않게 기초공사가 잘 되는 장점도 있을 것 같다

어찌 됐던 독학은 정말 쉽지 않다 내게 방향을 안내해 줄 길잡이가 있었으면 좋겠다 

 

 

Anyway.. checkbox 색상 변경하는 것에서부터 시작해서 이제는 ::after, ::before 에 대해 알아보자

이렇게 예시로 보니 한 번에 이해는 잘 되긴 하나 

<span> 요소(Element) 를 사용해도 될 것 같은데 왜 :after :before를 사용하는지 의문이 든다 

그냥 단순히 더 심플하니까? 더 간단하니까? 라고 생각했는데 

누군가가 아하 하고 머리에 느낌표가 떠오르게 하는 답변을 간단명료하게 한 걸 찾았다

다시 본론으로 돌아가서 참고한 것들을 이용하여 checkbox 색상 변경 해보기 

 

/* 체크 리스트에 마우스 오버 하였을 때*/

label:hover {
    color: rgb(48, 178, 48);
}

input[type=checkbox],
input[type=checkbox]:hover {
    -moz-appearance: none;
    -webkit-appearance: none;
    -o-appearance: none;
    outline: none;
    content: none;
}

input[type=checkbox]:before {
    content: "✓";
    font-size: 18px;
    color: transparent !important;
    display: block;
    width: 15px;
    height: 15px;
    border: 1.5px solid rgb(148, 141, 141);
    border-radius: 5px;
    margin-right: 0px;
}

input[type=checkbox]:hover:before {
    content: "✓";
    font-size: 18px;
    color: transparent !important;
    display: block;
    width: 15px;
    height: 15px;
    border: 1.5px solid rgb(48, 178, 48);
    border-radius: 5px;
    margin-right: 0px;
}

input[type=checkbox]:checked:before {
    color: white !important;
    width: 15px;
    height: 15px;
    border: 1.5px solid rgb(48, 178, 48);
    background-color: rgb(48, 178, 48);
}

아싸 드디어 성공 :hover 기능도 잘 되고 클릭해도 잘 된다 오예 하고 있었는데.....웬걸 

마우스를 떼니까 글씨 (label)은 그대로 있다 

그럼 그렇지 이렇게 한 번에 넘어갈 리가 있나 싶던 순간이었다

 

내 맘을 읽은 듯한 질문 발견 

진짜 스택오버플로우 없었으면 어쩔 뻔했어...

 

input[type=checkbox]:checked+label {
    color: rgb(48, 178, 48);
}

Stack Overflow 참고하여 코드를 하나 더 추가했더니

드디어 성공했다 

체크 모양을 조금 가운데로 맞추고 싶지만 그건 지금 우선순위가 아니기 때문에 다음에 다뤄봐야겠다

 

 

 

 

 

//비전공자가 혼자 공부하는 공간입니다