使用CSS3美化复选框checkbox
2016-06-02 18:30
405 查看
方法一 :使用图片
方法二:使用after
.chk_1 {
display:none;
}
.chk_1 + label {
background-color: #FFF;
border: 1px solid #C1CACA;
/* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05); */
padding: 9px;
border-radius: 5px;
display: inline-block;
position: relative;
margin-right: 30px;
}
.chk_1:checked + label {
background-color: #ECF2F7;
border: 1px solid #92A1AC;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);
color: #243441;
}
.chk_1:checked + label:after {
content: '\2714';
position: absolute;
top: 0px;
left: 0px;
color: #758794;
width: 100%;
text-align: center;
font-size: 1.4em;
padding: 1px 0 0 0;
vertical-align: text-top;
}
<input type="checkbox" id="checkbox_a1" class="chk_1" checked="">
<label for="checkbox_a1"></label>
.checkbox { display: none; } .checkbox-i{ margin-right: 20px; background-image: url("../img/icon.png"); background-repeat: no-repeat; background-position: -324px -40px; width: 22px; height: 22px; display: inline-block; position: relative; top: 5px; } .checkbox:checked + .checkbox-i{ background-position: -324px -11px; }
<input type="checkbox" class="checkbox " id="test"> <label class="checkbox-i" for="test"></label> <label class="label" for="test">
test</label>
方法二:使用after
.chk_1 {
display:none;
}
.chk_1 + label {
background-color: #FFF;
border: 1px solid #C1CACA;
/* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05); */
padding: 9px;
border-radius: 5px;
display: inline-block;
position: relative;
margin-right: 30px;
}
.chk_1:checked + label {
background-color: #ECF2F7;
border: 1px solid #92A1AC;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);
color: #243441;
}
.chk_1:checked + label:after {
content: '\2714';
position: absolute;
top: 0px;
left: 0px;
color: #758794;
width: 100%;
text-align: center;
font-size: 1.4em;
padding: 1px 0 0 0;
vertical-align: text-top;
}
<input type="checkbox" id="checkbox_a1" class="chk_1" checked="">
<label for="checkbox_a1"></label>
相关文章推荐
- Html 5/CSS 的学习(一)
- 格式化代码引发的css编译失败
- TextView代码动态实现字体不同大小样式风格颜色
- CSS 框模型
- HTML ,CSS关于表格,边框美化的问题
- file按钮美化成图片(纯HTML+CSS)
- 垂直居中的几大方法
- 纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等)
- CSS
- ElasticsSearch——HighLights
- 审查慕课网“实战”页面发现的CSS属性用法
- CSS绘图:墙
- css控制文字长度,超出长度显示...
- iOS设置状态栏样式,statusBarStyle
- css布局
- css3实现手风琴效果
- 倒计时Button,及Button样式
- 封装函数获取样式
- 【CSS 杂记】
- CSS基础学习笔记