📂프로그래밍

CSS로 체크박스에서 박스만 감추는 법

쇼케이스

R G B

최근에는 검색이나 필터링 설정 등에서 체크박스의 박스를 보여주지 않고 배경만 바꿔서 ON/OFF를 보여주는 경우가 많다. 위의 R, G, B는 그와 같은 방법으로 구현된 체크박스다.

코드

HTML

<input type="checkbox" id="box_R" hidden checked>
<label for="box_R" class="option">R</label>
<input type="checkbox" id="box_G" hidden checked>
<label for="box_G" class="option">G</label>
<input type="checkbox" id="box_B" hidden>
<label for="box_B" class="option">B</label>

• hidden: 체크박스의 박스를 숨긴다. 그냥 박스만 없애면 클릭할 곳이 없어지기 때문에 label을 사용해서 클릭할 곳을 만들어준다.
• checked: 체크박스가 기본적으로 선택된 상태로 시작한다. 이 속성을 제거하면 체크박스가 비활성화된 상태로 시작한다.

CSS

다음은 간단하게 테스트 할 수 있도록 HTML 코드 그대로 쓰여진 CSS다. 실제로는 별도의 CSS 파일에 작성하는 것이 좋다.

<style>
  .option {
    padding: 0 .4em 0 .4em;
    border: 2px solid transparent;
    border-radius: 5px;
  }
    input#box_R:checked + label {background-color: #aa0000; color: #ffffff;}
    input#box_G:checked + label {background-color: #00aa00; color: #ffffff;}
    input#box_B:checked + label {background-color: #0000aa; color: #ffffff;}
</style>

• .option: 그냥 박스를 예쁘게 꾸미기 위한 모양이다.
• intput#box_*:checked + label: 박스가 체크되었을 때 라벨의 스타일을 바꾸라는 의미다. 체크박스가 체크되면 그 다음에 오는 label의 배경색과 글자색을 바꾼다.