[체크박스]input checkbox 디자인하기

반응형 웹사이트를 만들면서, 기존의 디자인 체크박스를 웹접근성 심사에 통과시키기위해서 만들었던 방법을 처음과 완전히 다르게 고쳐야했다.ㅜㅜ 

그래서 이 기회에 체크박스 디자인에 대해 정리해보려고한다.

디자인 체크박스를 만들기위해서는 브라우저별로 checkbox의 디자인이 다르기 때문에 똑같이 만들기위해서는 기본 checkbox에 디자인css를 다시 넣어주어야한다.

우선 브라우저별로 checkbox 디자인을 비교해보았다.

 

 

차례대로 포커싱 상태 , 체크된 상태, 기본상태이다. 크롬을 제외하고는 포커싱될때 점선으로 표시된다.

checkbox와 포커싱 선의 간격을 조정하려면 padding값을 바꾸면 되는데, 보다시피 firefox가 기본적으로 padding이 있어서 나는 사용하지 않았다.

 

 

1) label로 checkbox

여러가지 방법으로 체크박스를 바꿀수있는데, 우선 라벨의 before 를 사용해서 checkbox를 바꿔볼수있다.

 

 

 

[HTML]

 

  
  체크박스

 

[CSS]

 

div {padding:20px}
input[type="checkbox"] {display:none;}
label {padding-left:33px;;line-height:26px;cursor:pointer}
label:before {content:"";display:block;width:18px;height:18px;background:#fff;border:3px solid #222;}
input[type=checkbox]:checked + label:before {content:"\2713";text-align:center;font-weight:800;color:#222}
 

 

-> 원래대로라면 checkbox를 display:none 해놓은 다음 label:before을 css로 꾸며서 checkbox 대신으로 삼는다. 다만 이방법은 checkbox가 포커싱이 안되기 때문에 접근성에 위배가 된다.

before는 가상선택자 이기때문에 Content:""와 div:block(or inline-block)를 선언해준다. checkbox 체크시에는 content:"\2713"을 꼭 써주어야 체크표시가 체크된다.

 

 

---------- css 변경

 

[CSS]

 

div {position:relative;/padding:20px}
input[type="checkbox"] {position:absolute;top:0;left:0;width:26px;height:26px;padding-top:4px;}
label {position:absolute;top:0;left:0;z-index:10;padding-left:33px;line-height:26px;cursor:pointer}
label:before {content:"";position:absolute;top:4px;left:5px;display:block;width:18px;height:18px;line-height:18px;background:#fff;border:3px solid #222;}
input[type=checkbox]:checked + label:before {content:"\2713";text-align:center;font-weight:800;line-height:18px;color:#222}

 

 

-> 감싼 div에 포지션 값을 주고, checkbox와 label, label:before에 position으로 위치를 잡게해서 체크박스 위에 가상으로 만든 label:before를 올려준다. 이때 체크박스의 width가 만든 checkbox보다 커야 포커싱 선이 보인다.

 

 

https://jsfiddle.net/jywoo/hwcf07mx/7/

 

 

포지션을 이용해 위치를 고정시켜버린다.

 

 

2) 이미지를 이용해 checkbox만들기

 

 

 

게시판 목록이나 글을 작성했을때, 메일함등에서 별표 표시된 이미지 아이콘을 본 적이 있을 것이다.

이미지로 체크박스를 만드는 방법 중 하나인데, label의 배경을 이용해서 만들수 있다.

 

 

[HTML]

 

  
  체크박스

 

 

[CSS]

 

div {position:relative}
input[type="checkbox"]{position:absolute;top:0;left:0;margin:0;width:17px;height:17px}
label{display:block;position:absolute;top:0;left:0;width:16px;height:16px;background:url(http://estar.dothome.co.kr/ex/imp1.jpg) 0 0 no-repeat;background-position:-3px -2px;cursor:pointer}
input[type="checkbox"]:checked+label{background-position:-21px -2px}
.hide{visibility:hidden;overflow:hidden;position:absolute;top:0;left:0;width:0;height:0;font-size:0;line-height:0}

 

https://jsfiddle.net/jywoo/9p1spcym/

 

 

label 에 직접 배경을 넣고, 클릭시 백그라운드의 포지션을 옮겨준다.

또한 label안의 텍스트는 숨김처리한다. 만약 텍스트를 적으려면 label:before로 처리해주면된다.