1.单选按钮
- 样式1
代码:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>按钮列表</title>
<style type="text/css">
body{
margin:0;
padding:0;
}
#container{
width:500px;
margin: 0 auto;
height:500px;
}
.radio-item{
position:relative;
}
.radio-item .radio-text{
position:relative;
top:-6px;
display: inline-block;
}
input[type="radio"]{
width:20px;
height: 20px;
opacity: 0;
}
input[type="radio"]+label{
position:absolute;
left:4px;
top:2px;
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid #f2f2f2;
}
input[type="radio"]:checked+label{
background:#999;
border:1px solid #999;
}
input[type="radio"]:checked+label:after{
position: absolute;
left: 7px;
top: 2px;
content: "";
width: 5px;
height: 12px;
border: 2px solid #fff;
border-left: none;
border-top: none;
transform: rotate(45deg);
}
</style>
<script type="text/javascript" src="../vendor/jquery-1.11.3.min.js" ></script>
</head>
<body>
<div id="container">
<div class="radio-item">
<input type="radio" id="item1" name="item1" checked/>
<label for="item1"></label>
<label for="item1" class="radio-text">选项一</label>
</div>
<div class="radio-item">
<input type="radio" id="item2" name="item1"/>
<label for="item2"></label>
<label for="item2" class="radio-text">选项二</label>
</div>
</div>
<script>
$(document).ready(function(){
});
</script>
</body>
</html>- 样式2
代码：对以上代码，做如下修改即可
input[type="radio"]:checked+label{
/*修改此处，就是修改按钮外边框的样式*/
/*background:#999;*/
border:1px solid #999;
}
input[type="radio"]:checked+label:after{
/*修改此处就是修改按钮选中状态的样式*/
position: absolute;
left: 5px;
top: 5px;
content: "";
width: 10px;
height: 10px;
background: #999;
border-radius: 50%;
}2.多选按钮
- 样式1
代码：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>按钮列表</title>
<style type="text/css">
body{
margin:0;
padding:0;
}
#container{
width:500px;
margin: 0 auto;
height:500px;
}
.radio-item{
position:relative;
}
.radio-item .radio-text{
position:relative;
top:-6px;
display: inline-block;
}
input[type="checkbox"]{
width:20px;
height: 20px;
opacity: 0;
}
input[type="checkbox"]+label{
position:absolute;
left:4px;
top:2px;
width: 20px;
height: 20px;
/*border-radius: 50%;*/
border: 1px solid #f2f2f2;
}
input[type="checkbox"]:checked+label{
/*修改此处，就是修改按钮外边框的样式*/
/*background:#999;*/
border:1px solid #999;
}
input[type="checkbox"]:checked+label:after{
/*修改此处就是修改按钮选中状态的样式*/
position: absolute;
left: 5px;
top: 5px;
content: "";
width: 10px;
height: 10px;
background: #999;
/*border-radius: 50%;*/
}
</style>
<script type="text/javascript" src="../vendor/jquery-1.11.3.min.js" ></script>
</head>
<body>
<div id="container">
<div class="radio-item">
<input type="checkbox" id="item1" name="item1" checked/>
<label for="item1"></label>
<label for="item1" class="radio-text">选项一</label>
</div>
<div class="radio-item">
<input type="checkbox" id="item2" name="item1"/>
<label for="item2"></label>
<label for="item2" class="radio-text">选项二</label>
</div>
<div class="radio-item">
<input type="checkbox" id="item3" name="item1" checked/>
<label for="item3"></label>
<label for="item3" class="radio-text">选项三</label>
</div>
<div class="radio-item">
<input type="checkbox" id="item4" name="item1"/>
<label for="item4"></label>
<label for="item4" class="radio-text">选项四</label>
</div>
</div>
<script>
$(document).ready(function(){
});
</script>
</body>
</html>- 样式2
代码：对以上代码做如下修改
input[type="checkbox"]:checked+label{
background:#999;
border:1px solid #999;
}
input[type="checkbox"]:checked+label:after{
position: absolute;
left: 7px;
top: 2px;
content: "";
width: 5px;
height: 12px;
border: 2px solid #fff;
border-left: none;
border-top: none;
transform: rotate(45deg);
}注释：以上我是针对的radio，checkbox单独进行了样式设计，防止，一个页面不同的按钮需求，如果一个页面上，按钮样式统一，选择器input[type="radio"]或input[type="checkbox"]替换为input