CSS3修改input|CSS3修改input [type=＂radio＂]默认样式 CSS3修改input[type=

【CSS3修改input|CSS3修改input [type="radio"]默认样式】最近业务需求需要做一个自定义的input [type="radio"]样式，在慕课网的CSS3教程中看到了相关的一个选择器的知识:checked选择器
教程里的代码给了我一个很方便的demo。于是我自己改造了一下，实现了自己想要的效果。

talk is cheap，show me the code

Ok,let us do it
首先是HTML结构

工作技能: 优秀：保证质量，高效，而可承担额外工作良好：能保质保量，按时完成任务中等：可基本完成任务，无明显亮点差：可基本完成任务，无明显亮点

接下来是比较关键的CSS

*{margin: 0; padding: 0; } p{ position: absolute; line-height: 1; } form { display: inline-block; margin-left: 89px; } .box { display: inline-block; width: 16px; height: 16px; margin-right: 10px; position: relative; background: #fff; vertical-align: middle; border:1px solid #e4e4e7; border-radius: 100%; } .box input { opacity: 0; position: absolute; top:-3px; left:-4px; width: 100%; height:100%; z-index:100; /*使input按钮在span的上一层，不加点击区域会出现不灵敏*/} input+span { display: block; width: 6px; height: 6px; border-radius:50%; position: absolute; background: #1796f9; top: 50%; left:50%; margin: -3px 00 -3px; z-index:1; } input[type="radio"] + span { opacity: 0; } input[type="radio"]:checked + span { opacity: 1; }

话不多说，上图