체크 박스

 

<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