체크박스/라디오버튼 checkbox radio css 로 꾸미기

체크박스 :

<div class="chk_box">

<input type="checkbox" id="pay01" />

<label for="pay01">

<span></span>

<p>전기세</p>

</label>

<input type="checkbox" id="pay02" />

<label for="pay02">

<span></span>

<p>가스</p>

</label>

</div>

 

라디오 :

<div class="radio_box">

<input type="radio" id="open_oneroom" name="room" />

<label for="open_oneroom">

<span></span>

<p>오픈형 원룸</p>

</label>

<input type="radio" id="seperation" name="room" />

<label for="seperation">

<span></span>

<p>분리형 원룸</p>

</label>

<input type="radio" id="tworoom" name="room" />

<label for="tworoom">

<span></span>

<p>투룸</p>

</label>

<input type="radio" id="threeroom" name="room" />

<label for="threeroom">

<span></span>

<p>쓰리룸</p>

</label>

<input type="radio" id="fourroom" name="room" />

<label for="fourroom">

<span></span>

<p>포룸</p>

</label>

</div>

 

 

 

 

CSS (체크박스 / 라디오)

 

.chk_box input {

display: none;

}

.chk_box input+label {

display: inline-block;

overflow: visible;

cursor: pointer;

margin-bottom: 0;

}

.chk_box input+label span {

display: block;

position: relative;

float: left;

box-sizing: border-box;

border: 1px solid #ddd;

border-radius: 0px;

margin-right: 0px;

margin-top: 0px;

}

.chk_box input+label span:before {

visibility: hidden;

opacity: 0;

position: absolute;

top: 50%;

transform: translateY(-50%);

left: 0;

right: 0;

margin: 0 auto;

background-color: #ed1847;

transition: all 0.1s ease-in-out;

content: '';

}

.chk_box input:checked+label span:before {

visibility: visible;

opacity: 1;

}

.chk_box input[type="checkbox"]+label span {

width: 20px;

height: 20px;

margin-top: 3px;

}

.chk_box input[type="checkbox"]+label span:before {

width: 10px;

height: 10px;

}

.chk_box label p {

float: left;

color: #333;

font-size: 16px;

padding-left: 10px;

margin-right: 30px;

margin-bottom: 0;

}

/*라디오박스*/

.radio_box input {

display: none;

}

.radio_box input+label {

display: block;

overflow: visible;

cursor: pointer;

width: 100%;

margin-bottom: 0;

}

.radio_box input+label span {

display: block;

position: relative;

float: left;

box-sizing: border-box;

border: 1px solid #ddd;

border-radius: 50%;

margin-right: 0px;

margin-top: 0px;

}

.radio_box input+label span:before {

visibility: hidden;

opacity: 0;

position: absolute;

top: 50%;

border-radius: 50%;

transform: translateY(-50%);

left: 0;

right: 0;

margin: 0 auto;

background-color: #ed1847;

transition: all 0.1s ease-in-out;

content: '';

}

.radio_box input:checked+label span:before {

visibility: visible;

opacity: 1;

}

.radio_box input[type="radio"]+label span {

width: 20px;

height: 20px;

margin-top: 0;

}

.radio_box input[type="radio"]+label span:before {

width: 10px;

height: 10px;

}

.radio_box label p {

float: left;

color: #333;

font-size: 16px;

padding-left: 8px;

margin-right: 35px;

margin-bottom: 0;

transform: translateY(-3px);

}