[CSS] 라디오 버튼 - 커스텀 스타일

See the Pen Untitled by 손지인 (@tlyifual-the-bold) on CodePen.

 

- HTML

<label for="agree1" class="radio_box">
	<input type="radio" id="agree1" name="agree" value="동의" checked="checked" />
	<span class="on"></span>
	동의
</label>
<label for="agree2" class="radio_box">
	<input type="radio" id="agree2" name="agree" value="미동의" />
	<span class="on"></span>
	미동의
</label>

- CSS

.radio_box { display: inline-block; *display: inline; *zoom: 1; position: relative; padding-left: 25px; margin-right: 10px; cursor: pointer; font-size: 14px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

/* 기본 라디오 버튼 숨기기 */
.radio_box input[type="radio"] { display: none; }

/* 선택되지 않은 라디오 버튼 스타일 꾸미기 */
.on { width: 20px; height: 20px; background: #ddd; border-radius: 50%; position: absolute; top: 0; left: 0; }

/* 선택된 라디오 버튼 스타일 꾸미기 */
.radio_box input[type="radio"]:checked + .on { background: #f86480; }
.on:after { content: ""; position: absolute; display: none; }
.radio_box input[type="radio"]:checked + .on:after { display: block; }
.on:after { width: 10px; height: 10px; background: #fff; border-radius: 50%; position: absolute; left: 5px; top: 5px; }

 

 
 

---

Reference
https://webdee.tistory.com/55