[html, css] 체크박스, 라디오 디자인 커스텀(checkbox, radio 변경)

1. 체크박스(checkbox) 디자인 변경 

<span class="chk"> 
  <input type="checkbox" id="chk"> 
  <label for="chk">체크박스1</label> 
</span>

.chk {position: relative;} 
.chk input[type="checkbox"] {
	position: absolute; 
    width: 1px; 
    height: 1px; 
    padding: 0; 
    margin: -1px; 
    overflow: hidden;
    border: 0 
} 
.chk input[type="checkbox"] + label { 
	display: inline-block; 
    position: relative; 
    cursor: pointer; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
} 
.chk input[type="checkbox"] + label:before { 
	content: ' '; 
    display: inline-block; 
    width: 15px;
    height: 15px;
    line-height: 15px;
    text-align: center; 
    vertical-align: middle;
    background: #fff;
    border: 1px solid #000; 
 } 
.chk input[type="checkbox"]:checked + label:before { 
	content: '\2714'; 
    color: #000; 
 }

---

2. 라디오(radio) 디자인 변경

<span class="rdo"> 
  <input type="radio" id="rdo"> 
  <label for="rdo">라디오1</label> 
</span>

.rdo {
  position: relative;
} 
.rdo input[type="radio"] {
  position: absolute; 
  padding: 0;
  overflow: hidden;
  border: 0;
  width: 1px; 
  height: 1px; 
} 
.rdo input[type="radio"] + label { 
  display: inline-block; 
  position: relative; 
  cursor: pointer; 
  -webkit-user-select: none; /* 사파리 브라우저 적용 */
  -moz-user-select: none; /* 파이어폭스 브라우저 적용 */
  -ms-user-select: none; /* 익스플로러 브라우저 적용 */
} 
.rdo input[type="radio"] + label:before { 
  content: ' '; 
  display: inline-block; 
  vertical-align: middle;
  width: 15px;
  height: 15px;
  line-height: 15px;
  text-align: center; 
  background: #fff;
  border: 1px solid #000; 
  border-radius:50%;
} 
.rdo input[type="radio"]:checked + label:after { 
  content: ''; 
  position: absolute; 
  top: 0px;
  bottom:0;
  left: 3px;
  margin:auto 0;
  width: 11px;
  height: 11px;
  background: #000;
  border-radius:50%;
}