[css] checkbox, radio button custom 체크박스, 라디오 버튼 커스텀

HTML (radio button)

<ul>
    <li>
        <span class="radio_wrap">
        	<input id="rdo11" type="radio" name="rdo1"><label for="rdo11"><span class="offscreen">라디오 1-1</span></label>
        </span>
    </li>
    <li>
        <span class="radio_wrap">
        	<input id="rdo12" type="radio" name="rdo1"><label for="rdo12"><span class="offscreen">라디오 1-2</span></label>
        </span>
    </li>
    <li>
        <span class="radio_wrap">
        	<input id="rdo13" type="radio" name="rdo1"><label for="rdo13"><span class="offscreen">라디오 1-3</span></label>
        </span>
    </li>
    <li>
        <span class="radio_wrap">
        	<input id="rdo14" type="radio" name="rdo1"><label for="rdo14"><span class="offscreen">라디오 1-4</span></label>
        </span>
    </li>
</ul>

 

 

HTML (checkbox)

<ul>
    <li>
        <span class="check_wrap">
        	<input id="chk11" type="checkbox"><label for="chk11"><span class="offscreen">선택</span></label>
        </span>
    </li>
    <li>
        <span class="check_wrap">
        	<input id="chk12" type="checkbox"><label for="chk12"><span class="offscreen">선택</span></label>
        </span>
    </li>
    <li>
        <span class="check_wrap">
        	<input id="chk13" type="checkbox"><label for="chk13"><span class="offscreen">선택</span></label>
        </span>
    </li>
    <li>
        <span class="check_wrap">
        	<input id="chk14" type="checkbox"><label for="chk14"><span class="offscreen">선택</span></label>
        </span>
    </li>
</ul>

 

 

CSS

ul{list-style: none;}
.radio_wrap, .check_wrap{position: relative;display: inline-block;min-height: 24px;font-size: 0;vertical-align: top;}
.radio_wrap input, 
.check_wrap input{position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);border: 0;}
.radio_wrap input + label, 
.check_wrap input + label{display: inline-block;position: relative;padding: 3px 0 3px 30px;font-size: 14px;line-height: 18px;letter-spacing: -0.025em;font-weight: 500;color: #000;cursor: pointer;vertical-align: top;-webkit-touch-callout: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.radio_wrap input + label:before, 
.radio_wrap input + label:after, 
.check_wrap input + label:before, 
.check_wrap input + label:after{content: "";display: inline-block;position: absolute;left: 0;top: 0;width: 24px;height: 24px;text-align: center;border-radius: 50%;box-sizing: border-box;-webkit-box-sizing: border-box;}
.radio_wrap input[disabled] + label, 
.radio_wrap input[aria-disabled] + label, 
.check_wrap input[disabled] + label, 
.check_wrap input[aria-disabled] + label{opacity: 0.4;pointer-events: none;}
.radio_wrap input:checked + label:before, 
.check_wrap input:checked + label:before{background-color: #000;border-color: #000;}
.radio_wrap + .input-box,
.check_wrap + .input-box{margin-top: 20px;}


/* radio */
.radio_wrap input + label:before{background-color: #DDE0E3;border: 1px solid #DDE0E3;}
.radio_wrap input + label:after{top: 7px;left: 7px;width: 10px;height: 10px;background-color: #fff;border: none;}
.radio_wrap input:checked + label:before{-moz-transition: background-color 0.15s;-webkit-transition: background-color 0.15s;transition: background-color 0.15s;-moz-animation: uiActive 0.18s ease-in-out forwards;-webkit-animation: uiActive 0.18s ease-in-out forwards;animation: uiActive 0.18s ease-in-out forwards;}


/* checkbox */
.check_wrap input + label:before {border: 1px solid #C2C7CC;background-color: #fff;}
.check_wrap input + label:after {background: url("ico_check.svg") 0 0 no-repeat;background-size: cover;}
.check_wrap input[disabled] + label:after, .check_wrap input[aria-disabled] + label:after {opacity: 0.5;}
.check_wrap input:checked + label:after {background: url("ico_check_on.svg") 0 0 no-repeat;background-size: cover;}
.check_wrap input:checked + label:before {-moz-transition: background-color 0.15s;-webkit-transition: background-color 0.15s;transition: background-color 0.15s;-moz-animation: uiActive 0.18s ease-in-out forwards;-webkit-animation: uiActive 0.18s ease-in-out forwards;animation: uiActive 0.18s ease-in-out forwards;}