[CSS] Radio Button(라디오 버튼) 커스텀, 스타일 변경하기

 

 

 

라디오 버튼 스타일을 커스텀하는 방법입니다.

 

커스텀	동의 미동의
브라우저 기본	동의   미동의

 

 

 

 

1. 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>

 

 

 

2. 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; }