使用 CSS 修改 HTML 默认单选和复选框样式
2018-09-14 本文已影响0人
锋享前端
“不知道为什么大多数人会认为默认样式很丑”；“我可耻的认为默认样式怎么了？不丑啊？”（还不是因为我懒）为了美观经常会设计一些漂亮的单选或者复选框，这就要求我们前端开发必须去修改HTML单选复选框的默认样式，当然修改的方式有很多种，在这里的是如何用CSS来修改。下面代码复制粘贴即可用：
要实现的效果如下：
企鹅群：829568767
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
.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;
}
</style>
</head>
<body>
<div class="choice">
<label class="radio">盖伦
<input type="radio" name="radio" value="1" checked>
<i></i>
</label>
<label class="radio">亚瑟
<input type="radio" value="2" name="radio">
<i></i>
</label>
</div>
</body>
</html>
这样的效果是不是很好看呢？这里只是给大家提供一个思路；希望能给刚开始学的同学提供一扇新得大门，开动你的大脑，灵活应用属性，就感觉在你的键盘之下，代码无所不能；扯远了；
