Write By Monkeyfly
以下内容均为原创,如需转载请注明出处。
前提
在项目中经常会遇到样式美观的radio
或者checkbox
,经过我的观察,发现有两种实现方法:
- 利用点击时切换不同的图片代替
radio
或者checkbox
,来实现选中或者取消时的样式变换效果。 - 利用
label
标签的特性以及i
元素搭配伪元素(:before或者:after)
进行模拟。
下面主要说第二种实现方式:
实现原理
<!-- 结构:一个 label 标签,其中包含 input 元素和 i 元素 -->
<label>
<input type="radio"><i><i>男
</label>
<!-- 基本原理: -->
<!-- 1.首先将 input 元素 “隐藏” 起来;-->
(1)可以使用 visibility: hidden; opacity: 0;来实现
(2)也可以使用 display:none;来实现
(3)或者使用 position:absolute; left:-9999px;来实现,都是可以的
<!-- 2.然后利用 label 标签的特性,在点击时将 input 元素选中或取消选中。 -->
<!-- 3.i 元素结合伪类(:before或:after)模拟单选框 radio 和多选框 checkbox 的外观。 -->
具体操作
一、美化单选按钮(radio)
1.具体代码如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3美化单选按钮</title>
<style>
/*隐藏input*/
label.bui-radios-label input[type="radio"]{
position: absolute;
opacity: 0;
visibility: hidden;
}
/*自定义radio*/
label.bui-radios-label .bui-radios{
display: inline-block;
position: relative;
width: 13px;
height: 13px;
background-color: #fff;
border: 1px solid #979797;
border-radius: 50%;
vertical-align: -2px;
margin-right: 5px;
}
/*单选框选中后,自定义radio的样式*/
label.bui-radios-label input[type="radio"]:checked + .bui-radios:after{
position: absolute;
content: "";
width: 7px;
height: 7px;
background-color: #fff;
border-radius: 50%;
top: 3px;
left: 3px;
}
label.bui-radios-label input[type="radio"]:checked + .bui-radios{
background-color: #00B066;
border:1px solid #00B066;
}
label.bui-radios-label input[type="radio"]:disabled + .bui-radios{
background-color: #e8e8e8;
border:1px solid #979797;
}
label.bui-radios-label input[type="radio"]:disabled:checked + .bui-radios:after{
background-color: #c1c1c1;
}
/*自定义radio的过渡效果*/
label.bui-radios-label.bui-radios-anim .bui-radios{
-webkit-transition:background-color ease-out .5s;
transition:background-color ease-out .5s;
}
</style>
</head>
<body>
<h4>有简单的背景动画:</h4>
<label class="bui-radios-label bui-radios-anim">
<input type="radio" name="sex"><i class="bui-radios"></i>男
</label>
<label class="bui-radios-label bui-radios-anim">
<input type="radio" name="sex"><i class="bui-radios"></i>女
</label>
<h4>无背景动画:</h4>
<label class="bui-radios-label">
<input type="radio" name="sex"><i class="bui-radios"></i>男
</label>
<label class="bui-radios-label">
<input type="radio" name="sex"><i class="bui-radios"></i>女
</label>
<h4>禁用状态(disabled):</h4>
<label class="bui-radios-label">
<input type="radio" name="sex" disabled="disabled"><i class="bui-radios"></i>男
</label>
<label class="bui-radios-label">
<input type="radio" name="sex" disabled="" checked=""><i class="bui-radios"></i>女
</label>
</body>
</html>
2.效果展示
二、美化多选框(checkbox)
1.具体代码如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3美化checkbox</title>
<style>
label.bui-checkbox-label input[type="checkbox"]{
visibility: hidden;
opacity: 0;
}
label.bui-checkbox-label .bui-checkbox{
display: inline-block;
position: relative;
width: 13px;
height: 13px;
border: 1px solid #ddd;
background-color: #fff;
vertical-align: -2px;
margin-right: 5px;
}
label.bui-checkbox-label input[type="checkbox"]:checked + .bui-checkbox:after{
position: absolute;
content: "";
width:8px;
height: 4px;
border-left:2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(-45deg) translate(-50%,-50%);
/*top:50%;*/
left:50%;
}
label.bui-checkbox-label input[type="checkbox"]:checked + .bui-checkbox {
background-color: #00B066;
}
label.bui-checkbox-label input[type="checkbox"]:disabled + .bui-checkbox{
background-color: #e8e8e8;
border:1px solid #979797;
}
label.bui-checkbox-label input[type="checkbox"]:disabled:checked + .bui-checkbox:after{
border-color: #000;
}
label.bui-checkbox-label.bui-checkbox-anim .bui-checkbox{
-webkit-transition:background-color ease-in-out .3s;
transition:background-color ease-in-out .3s;
}
</style>
</head>
<body>
<h4>有简单的背景动画:</h4>
<label class="bui-checkbox-label bui-checkbox-anim">
<input type="checkbox" name="sex"><i class="bui-checkbox"></i>男
</label>
<label class="bui-checkbox-label bui-checkbox-anim">
<input type="checkbox" name="sex"><i class="bui-checkbox"></i>女
</label>
<h4>无背景动画:</h4>
<label class="bui-checkbox-label">
<input type="checkbox" name="sex"><i class="bui-checkbox"></i>男
</label>
<label class="bui-checkbox-label">
<input type="checkbox" name="sex"><i class="bui-checkbox"></i>女
</label>
<h4>禁用状态(disabled):</h4>
<label class="bui-checkbox-label">
<input type="checkbox" name="sex" disabled="disabled"><i class="bui-checkbox"></i>男
</label>
<label class="bui-checkbox-label">
<input type="checkbox" name="sex" disabled="" checked=""><i class="bui-checkbox"></i>女
</label>
</body>
</html>
2.效果展示