“不知道为什么大多数人会认为默认样式很丑”；“我可耻的认为默认样式怎么了？不丑啊？”(还不是因为我懒)为了美观经常会设计一些漂亮的单选或者复选框，这就要求我们前端开发必须去修改HTML单选复选框的默认样式，当然修改的方式有很多种，在这里的是如何用CSS来修改。下面代码复制粘贴即可用：
要实现的效果如下：
企鹅群：829568767
.choice {
position: relative;
}
.choice .radio {
position: relative;
display: inline-block;
font-weight: 400;
color: #0c4757;
padding-left: 25px;
cursor: pointer;
}
.choice .radio input {
position: absolute;
left: -9999px;
}
.choice .radio i {
display: block;
position: absolute;
top: 1px;
left: 0;
width: 15px;
height: 15px;
outline: 0;
border: 1px solid #47a8c0;
background: #9cd9e8;
border-radius: 50%;
transition: border-color .3s -webkit-transition: border-color .3s;
}
.choice .radio input:checked+i {
border-color: #0c4757;
}
.choice .radio input+i:after {
position: absolute;
content: '';
top: 3px;
left: 3px;
width: 9px;
height: 9px;
border-radius: 50%;
background-color: #47a8c0;
opacity: 0;
transition: opacity .1s;
-webkit-transition: opacity .1s;
}
.choice .radio input:checked+i:after {
opacity: 1;
}
盖伦
亚瑟
这样的效果是不是很好看呢？这里只是给大家提供一个思路；希望能给刚开始学的同学提供一扇新得大门，开动你的大脑，灵活应用属性，就感觉在你的键盘之下，代码无所不能；扯远了；