您的位置：首页 > Web前端 > CSS

CSS 实现自定义样式的单选框与多选框

2017-06-26 13:58 330 查看

前端在开发的过程中，经常会遇见使用单选框以及多选框的情况，但是默认的选框按钮的样式单一，一般我们需要去自定义一些选框按钮的样式；

通常情况下，单选、多选为方便自定义样式，一般会采用input+label去实现，这里实现的原理主要是运用了label标签的for属性；

for 属性规定 label 与哪个表单元素绑定。

1. 单选框

实现方式：input type=radio + label

HTML：

<body>
<div class="box">
<input type="radio"  id="radio1"  name="radio"  checked="checked"/><label for="radio1">选项一</label>
</div>
<div class="line"></div>
<div class="box">
<input type="radio"  id="radio2"  name="radio"/><label for="radio2">选项二</label>
</div>
<div class="line"></div>
<div class="box">
<input type="radio"  id="radio3"  name="radio"/><label for="radio3">选项三</label>
</div>
<div class="line"></div>
<div class="box">
<input type="radio"  id="radio4"  name="radio"/><label for="radio4">选项四</label>
</div>
<div class="line"></div>
<div class="box">
<input type="radio"  id="radio5"  name="radio"/><label for="radio5">选项五</label>
</div>
<div class="line"></div>
</body>

CSS:

<style type="text/css">
*{
margin: 0px;
padding: 0px;
border: none;
box-sizing: border-box;
outline: none;
}
.box{
width: 100%;
height: 50px;
text-align: center;
}

input{
display: none;
}

label{
width: 100%;
height: 100%;
display: inline-block;
position: relative;
line-height: 50px;
color: #999;
}
label:active{
background: #EEEEEE;
}
label:after{
content: "";/*必须设置*/
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid green;
position: absolute;
top: 15px;
left: 15px;
border-radius: 20px;
}

input:checked+label:after{
background-color: green;
}

.line{
width: 100%;
height: 1px;
background: #ccc;
opacity: 0.2;
}
</style>

2. 多选框

实现方式：input type=checkbox + label

HTML:

<body>
<div class="box">
<input type="checkbox"  id="checkbox1"/><label for="checkbox1">选项一</label>
</div>
<div class="line"></div>
<div class="box">
<input type="checkbox"  id="checkbox2"/><label for="checkbox2">选项二</label>
</div>
<div class="line"></div>
<div class="box">
<input type="checkbox"  id="checkbox3"/><label for="checkbox3">选项三</label>
</div>
<div class="line"></div>
<div class="box">
<input type="checkbox"  id="checkbox4"/><label for="checkbox4">选项四</label>
</div>
<div class="line"></div>
<div class="box">
<input type="checkbox"  id="checkbox5"/><label for="checkbox5">选项五</label>
</div>
<div class="line"></div>
</body>

css:

<style type="text/css">
*{
margin: 0px;
padding: 0px;
border: none;
box-sizing: border-box;
outline: none;
}
.box{
width: 100%;
height: 50px;
}
input{
display: none;
}
label{
width: 100%;
height: 50px;
display: inline-block;
line-height: 50px;
position: relative;
text-align: center;
}
label:active{
background: #EEEEEE;
}
label:after{
content: "";
width: 20px;
height: 20px;
border: 1px solid green;
border-radius: 20px;
display: inline-block;
position: absolute;
top: 15px;
left: 15px;
}
input:checked+label:after{
background-color: green;
}

.line{
width: 100%;
height: 1px;
background: #CCCCCC;
opacity: 0.3;
}
</style>

CSS自定义选框样式Demo下载

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css 标签 checkbox label

相关文章推荐

新的分享

章节导航