커스텀 체크박스(디자인) 스타일 만들기

HTML/CSS : 커스텀 체크박스 스타일 만들기

사실 checkbox, radio button, select 등의 form요소들은 스타일을 건드리지 않는게 접근성 등에 좋다.

그래서 지금까지 웹페이지에서는 기본스타일로 사용해왔고, 기획자들이 이쁘게 해달라고 하면 설득해서 

기본스타일로 사용해왔는데 이번에 모바일웹에 체크박스를 처음 사용해봤는데 ios는 정말 최악의 모습이었다. 

위 캡쳐이미지 처럼 코딱지 만한 크기에 실제로 터치도 잘 되지 않았다. 그래서 체크박스를 제외하자고 의견을 내봤는데

해당 페이지에서는 반드시 체크박스가 들어가길 원했다.

결국 커스텀 스타일 체크박스를 사용하기로 결정.. .

방식은 checkbox와 label을 박스로 감싼다음 label을 position으로 띄어 label 에 background를 줘서 

checkbox를 덮는 형식이다. 글보단 소스가 이해가 편할 것이다.

먼저 html 소스는 일반적으로 폼태그 안의 input과 label을 사용할때와 같고, 

커스텀할 위치의 check에 부모로 박스를 감싸주면 된다. 

 

	

		
커스텀 체크박스
		
		커스텀 체크박스1
		

		
		커스텀 체크박스2
	

다음은 css소스이다.

 

	.custom_checkbox {position:relative; margin:45px 0 0 20px;}
	.custom_checkbox label {position:absolute; left:0; height:20px; padding:4px 0 0 25px; background:url('images/custom_checkbox2.png') no-repeat;}
	.custom_checkbox input[type="checkbox"]:checked + label {background-position:0 -25px;}

감싸고 있는 box인 custom_checkbox에 position속성을 relative로 줘 기준을 만든 뒤, 

label의 position은 absolute값을 줘서 x, y 위치값을 조절해 기본 checkbox를 덮는 방식이다.

checked, unchecked 된 디자인이미지를 하나의 이미지파일로 저장하여 label의 background에는 

unchecked상태의 기본 이미지가 보이도록 position 값을 준 뒤, 

input[type="checkbox"]:checked + label의 background-position값을 조절하여 checked된 이미지가 

보이도록 하면 된다. 

<실제 서비스에 적용된 모습>

실제 checkbox가 가려져있기 때문에 자체를 클릭하는 것은 불가능하지만 label과 체크박스를 매칭해두었기 때문에 

레이블을 클릭해도 체크박스에 checked, unchecked가 가능하다.