티스토리 뷰

WEB/css

체크 박스

silverline79 2021. 6. 29. 11:09

 

<div class="recheckbox">
<input type="checkbox" name="" id="reCheck">
<label class="check" for="reCheck">예약/분할 발송</label>
</div>

 

 

.recheckbox { float: left; width: 30%; position: relative; }
.recheckbox label { display: inline-block; padding-left: 40px; position: relative; line-height: 35px; color: #222222; font-weight: 500; cursor: pointer; word-break: break-all; font-size: 15px; }
.recheckbox label:before { background-color: #ffffff; border: 1px solid #e4e4e4; background-color: #e4e4e4; border-radius: 15px; content: ""; display: inline-block; width: 29px; height: 29px; position: absolute; top: 2px; left: 0; transition: 0.3s ease-in-out; outline: none !important; }
.recheckbox label:after { display: block; content: ""; position: absolute; top: 0; left: 0; width: 29px; height: 29px;  }
.recheckbox input[type="checkbox"] { cursor: pointer; opacity: 0; z-index: 1; outline: none !important; margin: 2px -16px 0 0; display: none; background: url(../images/comCheck.png) no-repeat 0 2px;}
.recheckbox input[type="checkbox"]:checked + label:before { background-color: #5c38ff; border-color: #5c38ff; background: url(../images/comCheck_on.png) no-repeat 0 2px; }

 

 

comCheck.png
0.00MB
comCheck_on.png
0.00MB

'WEB > css' 카테고리의 다른 글

버튼 투명처리 후 배경  (0) 2021.06.29
닫기버튼 회전 애니메이션  (0) 2021.06.29
box-shadow 투명적용  (0) 2021.06.29
페이징 css  (0) 2021.06.29
말줄임  (0) 2021.06.29
댓글