input checkbox 커스텀 심플

2022. 7. 26. 15:57

항상 찾아 헤메이는 input checkbox custom 블로그에 기록해서

편리하게 사용할려고 써논다.

회사 업무중에 이런 체크박스를 custom해야 하는 상황이 발생.

빠르게 구글링 서치후..

나만의 커스텀을 만들었다.

html

<div class="check__line">
    <input id="agree" type="checkbox">
    <label for="agree">
        <span>개인정보처리 방침에 따라 개인정보 수집ㆍ활용에 동의합니다.</span>
    </label>
</div>

css

.check__line input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.check__line input[type="checkbox"] + label {
  display: inline-block;
  position: relative;
  padding-left: 26px;
  cursor: pointer;
}
.check__line input[type="checkbox"] + label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 20px;
  height: 20px;
  text-align: center;
  background: url(../images/sub/check_off.png)no-repeat;  
  box-sizing: border-box;
  border-radius: 5px;
}

/* 보여질 부분의 스타일을 추가하면 된다. */
.check__line input[type="checkbox"]:checked + label:after {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  width: 20px;
  height: 20px;  
  background: url(../images/sub/check_on.png)no-repeat;  
  background-position: center center;
  border-radius: 5px;
}

.check__line input[type="checkbox"] + label span {
  font-weight: 400;
  font-size: 13px;
  line-height: 26px;  
  letter-spacing: -1px;
  color: rgba(0, 0, 0, 0.5);
}

여기서

체크박스 기본 상태

.check__line input[type="checkbox"] + label:before {}