라디오/체크박스

input[type=radio].styled,
						input[type=checkbox].styled {
							position:relative;
							z-index:5;
							opacity:0;
						}
						.chkbox {
							display:inline-block;
							position:relative;
							box-sizing:border-box;
							font-size:0;
							vertical-align:middle;
						}
						.chkbox input {
							width:18px;
							height:18px;
							margin:0;
							padding:0;
						}
						.chkbox .chk {
							position:absolute;
							top:0;
							left:0;
							width:100%;
							height:100%;
							box-sizing:border-box;
							border:1px solid #ddd;
						}

/* 라디오 */
						.chkbox input[type=radio] + .chk {border-radius:50%;}
						.chkbox input[type=radio] + .chk:before {
							content:'';
							position:absolute;
							top:50%;
							left:50%;
							transform:translate(-50%,-50%);
							width:100%;
							height:100%;
							border-radius:50%;
							background-color:#42b4f1;
							opacity:0;
						}
						.chkbox input[type=radio]:checked + .chk:before {
							width:62%;
							height:62%;
							opacity:1;
							transition:all .3s;
						}
						.chkbox input[type=radio][disabled] + .chk {background-color:#f5f5f5;}
						.chkbox input[type=radio][disabled] + .chk:before {background-color:#ddd;}

/* 체크박스 */
						.chkbox input[type=checkbox] + .chk:before {
							content:'';
							position:absolute;
							top:50%;
							left:50%;
							transform:translate(-50%,-50%) rotate(-45deg) scale(2);
							width:40%;
							height:60%;
							margin-top:-7%;
							box-sizing:border-box;
							border-right:2px solid #42b4f1;
							border-bottom:2px solid #42b4f1;
							opacity:0;
						}
						.chkbox input[type=checkbox]:checked + .chk:before {
							transform:translate(-50%,-50%) rotate(45deg) scale(1);
							opacity:1;
							transition:all .3s;
						}
						.chkbox input[type=checkbox][disabled] + .chk {background-color:#f5f5f5;}
						.chkbox input[type=checkbox][disabled] + .chk:before {border-color:#ddd;}

.chkbox input[type=radio]:focus + .chk,
						.chkbox input[type=checkbox]:focus + .chk {outline:1px dotted #eee;}

라디오/체크박스

예제

라디오

체크박스

코드

- html

- css

- script