input type:checkbox 체크박스 커스텀 css디자인 변경하기

input태그 커스텀은 label으로!

 

html태그 <input type="checkbox"/>는 기본적으로 아주 심플한 디자인으로 보여지는데 프로젝트를 진행해보면 사이트의 분위기라던거 컨셉에따라 다른 디자인으로 변경해야하는 경우가 있다.

 

근데 단순하게 style로 바로 input태그를 커스텀할수가 없다.

이때 사용하는 방법이 바로 lable이다. checkbox뿐만아니라 같은 방법으로 파일 열기인 <input type="file"/>도 역시 label으로 커스텀할 수 있다.

 

 

일단 기본 체크박스의 경우 아래와 같다. 

 

이걸 조금 더 사이즈가 큰 체크박스로 바꿔보려고 한다

 

 

checkbox옆에 label태그를 생성해 checkbox의 id 속성을 label태그의 for속성으로 연결해준다

· html

      <input type="checkbox" id="check1">
        <label for="check1"></label>

 

그리고 이 라벨을 원하는 디자인으로 css 스타일을 꾸며준다.

체크시 디자인은 그냥 박스가 채워지는 디자인으로 하고싶다면 background만 변경해주면 되고 나처럼 다른모양을 넣고싶다면 ::after선택자를 이용해 넣어주면 된다

기존의 input태그는 display:none으로 가려주면 끝-!

 

·  css

input[type="checkbox"]{
        display: none;
      }
input[type="checkbox"] + label{
        display: inline-block;
        width: 30px;
        height: 30px;
        border:3px solid #707070;
        position: relative;
      }
input[id="check1"]:checked + label::after{
        content:'✔';
        font-size: 25px;
        width: 30px;
        height: 30px;
        text-align: center;
        position: absolute;
        left: 0;
        top:0;
      }