input 타입 radio와 checkbox 커스텀 하기

 

input 태그 타입 radio와 checkbox를 css를 사용하여 커스텀 하는 방법에 대하여 알아보겠습니다.

 

본 내용에 들어가기 앞서

 input 태그에 관한 기초적인 사용 설명은 이전 포스팅 'input 와 label 태그 활용하기'를 참조해 주세요^^

 

https://salt-planet.com/entry/input-%EC%99%80-label%ED%83%9C%EA%B7%B8-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

input 와 label태그 사용하기

 

radio와 checkbox

이전 포스팅에서 확인할 수 있듯이 radio와 chexkbox는 input 태그의 type을 통해 제공되는 html의 기본 기능 중 하나입니다. radio는 사용자에게 복수 선택이 불가능 한 답변을 요청할 때, checkbox는 복수 선택이 가능한 답변을 요청할 때 사용이 됩니다.

 

아래는 radio와 checkbox의 예시입니다.

 

라디오

<input id="radio" type="radio" /><label for="radio">라디오</label>

체크박스

<input id=" checkbox " type=" checkbox " /><label for="checkbox"> 체크박스 </label>

 

보다시피 두 타입 모두 input 부분은 도형으로 이루어져 있습니다. 이 부분에 대하여 커스텀 하는 법을 정리해 보겠습니다.

css를 활용하여 커스텀 하기

input radio와 checkbox는 직접 css를 통해 커스텀 하는 데는 한계가 있습니다. 또한 클릭 되어 체크 상태가 되었을 때의 디자인 변경은 더더욱 어렵습니다. 그렇기 때문에 input의 박스를 숨기고 label을 클릭해도 input을 선택한 것과 동일하게 적용되는 효과를 사용하여 커스텀 하여야 합니다.

먼저 교체할 이미지를 준비한다

 그러기 위해서는 제일 먼저 원하는 형태의 radio와 checkbox 이미지가 필요합니다. 이미지는 선택되지 않았을 때와 선택되었을 때 두 가지 버전이 필요합니다. 

 

저는 간단하게 위와 같이 디자인 파일을 준비했습니다.

background로 적용하기

See the Pen input bg 커스텀 by solip000 (@solip000) on CodePen.

이미지를 bg로 넣어 input을 커스텀 한 예시입니다. 이 방법을 사용할 때 중요한 점은 input radio나 checkbox의 박스 부분 영역만큼 label의 왼쪽 여백을 늘려주었다는 것입니다. 이때 margin이 아니라 padding 값을 사용하여야 하는데, 이유는 커스텀 되어 보이는 박스들은 실제로 존재하는 것이 아니라 label의 범위 위에 그려진 배경 이미지일 뿐이기 때문입니다. 

가상 태그 사용하기

가상 태그란?

:before, :after를 사용하여 특정 태그에 가장의 태그를 추가해 주는 것입니다. 텍스트 입력이나 스타일 추가 등의 다양한 용도로 사용이 가능합니다. 그러나 javascript에서의 감지가 불가능하기 때문에 신중한 사용이 필요합니다.

 

See the Pen 가상태그 활용하여 input 커스텀 하기 by solip000 (@solip000) on CodePen.

가상 태그 before를 사용하여 input을 커스텀 하였습니다. 이러한 커스텀 방식에도 label의 텍스트가 아닌 이미지 박스를 클릭하는 것에도 문제없이 기능이 작동하는 것을 확인 할 수 있습니다. 이유는 label:before 태그는 label 안에 부속된 것이어서 클릭 되었을 때 label의 텍스트 부분을 누른 것과 동일하게 작동되기 때문입니다.

 

오늘은 input 태그 중 radio와 checkbox를 커스텀 하는 방법에 대하여 알아보았습니다.  다음번에는 input의 다른 타입을 커스텀 하는 방법에 대해서도 정리해 보겠습니다^^