[CSS] checkbox 만들기

로그인 페이지를 구현하는 중, 로그인 유지 기능을 만들게 되었습니다. 로그인 유지를 할지 말지 checkbox로 선택을 받으려 했습니다. 하지만 그러기에 checkbox 의 디자인이 너무 이쁘지 않아서 새롭게 디자인 하고자 했습니다.

현재 checkbox 와 label은 다음과 같습니다.

<div class="keep_login_container">
  <input id="keep_login_checkbox" type="checkbox" name="keep_login" value="TRUE">
  <label for="keep_login_checkbox">keep login</label>
</div>

 

먼저 현재의 checkbox가 보이지 않게 해주었습니다. 해당 위치에 다른 checkbox 를 만들어줄 것이기 때문에 공간도 차지하지 않도록 해주었습니다.

input[type=checkbox] {
    display: none;
}

다음으로는 label 에 대한 속성을 추가해주었습니다. 옆에 checkbox가 들어갈 공간을 주기 위해서 좌측 패딩 값을 주었습니다.

input[type=checkbox] + label{
    cursor: pointer;
    padding-left:25px;
}

이제 before 속성을 이용하여 label 전에 안보이는 원래의 checkbox 에 css 를 주었습니다. 내용은 비어있게 끔 하고 전체적인 크기, 색, 테두리 굴곡, 음영 등을 추가해주었습니다. 그리고 위치를 잡기 위해서 position을 절대적으로 왼쪽에 밀착시켰습니다. 이 경우, 최상단인 body 를 기준으로 적용되기 때문에 부모 div에 position도 바꿔주었습니다.

input[type=checkbox] + label:before {
    content: "";
    width: 20px;
    height: 20px;
    margin-right: 10px;
    position: absolute;
    left: 0;
    background-color: #f7f7f7;
    border-radius: 2px;
    box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);  
}

.keep_login_container {
    position: relative;
}

마지막으로 checkbox 를 check 했을 때, 체크 표시가 나타나고 배경색이 바뀌도록 해주었습니다.

input[type=checkbox]:checked + label:before{
    content: "\2714";
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);  
    font-size: 18px; 
    font-weight:600; 
    color: #fff;  
    background:#2f87c1;
    text-align: center;   
}

 

최종적인 css 는 다음과 같습니다.

.keep_login_container {
    position: relative;
}

input[type=checkbox] {
    display: none;
}

input[type=checkbox] + label{
    cursor: pointer;
    padding-left:25px;
}

input[type=checkbox] + label:before {
    content: "";
    width: 20px;
    height: 20px;
    margin-right: 10px;
    position: absolute;
    left: 0;
    background-color: #f7f7f7;
    border-radius: 2px;
    box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);  
}

input[type=checkbox]:checked + label:before{
    content: "\2714";
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);  
    font-size: 18px; 
    font-weight:600; 
    color: #fff;  
    background:#2f87c1;
    text-align: center;   
}

 

[좌측]기존의 checkbox 와 [우측]변경된 checkbox 비교