Html
    Css
    Js

    
                        
body {
	background: #fff;
	padding: 0; margin: 0;
}

label {
	display: inline;
}


/* RADIO */

.tag{
	width:500px;
	height:200px;
	margin:0 auto;
}
.regular-radio {
	display: none;
}

.regular-radio + label {
	-webkit-appearance: none;
	background-color: #fff;
	border: 1px solid #aaa;
	padding: 9px;
	border-radius:50px;
	display: inline-block;
	position: relative;
}

.regular-radio:checked + label:after {
	content: ' ';
	width: 12px;
	height: 12px;
	border-radius: 50px;
	position: absolute;
	top: 3px;
	background:#47d9bf;
	box-shadow:0px 0px 5px 0px #47d9bf;
	left: 3px;
}


                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

纯CSS3实现单选框

2
      神奇的北哥哥0
      2018/3/17 17:27:27
      Way┵0
      2018/1/11 11:13:14

      请你修改一下题目可否?你都用了radio了。你还能说css实现单选框?你这只是用css修改了radio的样式好吗。

      回复