HTML / CSS
[CSS] CSS만으로 checkbox, radio 디자인하기
- 2022.08.10 17:19:03
 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 모양을 구현하였다. 예시는 아래 참고.  |