통합검색

HTML / CSS

[CSS] CSS만으로 checkbox, radio 디자인하기



checkbox, radio 를 디자인하기 위해 갖가지 방법이 동원된다.
나의 경우 이전에는 습관적으로 javascript를 통해 디자인을 했었는데, 퍼블 완료 후 개발이 적용되는 과정에 예상치 못한 오류들을 맞닥뜨리면
여간 까다로운 일이 아니다.

javascript 없이 CSS만으로 checkbox 와 radio 디자인이 가능한 것은 CSS의 '+' 선택자를 통해 가능하다.
오랜 습관이 되어온 javascript에서 탈피하여 CSS만으로 디자인 해보도록 한다.

[!]HTML[/!]
CSS만으로 checkbox를 디자인하기 때문에 여느때와 다름없이 labal, input으로 HTML코딩 한다.
 
<input type="checkbox" id="test" />
<label for="test">체크박스 디자인 테스트</label>


[!]CSS[/!]
CSS의 +선택자와 :before 가상요소를 활용해 아래와 같이 체크박스 on/off 아이콘을 만든다.
(체크 모양 아이콘은 Font-Awesome 으로 만들었다.)
 
input[type=checkbox] + label{padding-left: 25px;position: relative;}
input[type=checkbox] + label:before {
    content: '';display: block;width: 15px;height: 15px;border-radius: 3px;position: absolute;top: 50%;margin-top: -9px;left: 0;border: 1px solid #ddd;
}
input[type=checkbox]:checked + label:before {
    border-color: #000;font-family: 'Font Awesome 5 Free';content: '\f00c';font-weight: bold;text-align: center;font-size: 10px;line-height: 15px;
}

+ 선택자를 통해 input 바로 뒤에 오는 label을 스타일링 했으며,
:before 가상요소를 label에 추가하여 체크 on/off 모양을 구현하였다.
예시는 아래 참고.
리스트