开发工具与关键技术:Dreamweaver CC 2017
作者:林诗雄
撰写时间:2019年1月17日
checkbox无法直接改变样式只能通过连接到label标签来改变checkbox的样式
首先建立一个input标签然后在建立一个label标签然后用label标签连接checkbox标签
<input id="input" class="input" type="checkbox" />
<label for="input"></label >
然后改变没有点击前label标签的样式如下
label{
display: block;
width: 20px;
height: 20px;
line-height: 20px;
cursor: pointer;
position: absolute;
border: 1px solid #ccc;/*改变复选框的边框颜色也可以不要边框*/
top: 6px;
left: 6px;
}
下面是label标签的样式里面有个input的checkbox样式
接下来我们用一段代码来去掉input的checkbox样式
/* 隐藏CheckBox属性原来的样式*/
input[type=checkbox]{
/* visibility 属性规定元素是否可见*/
visibility: hidden;
}
效果如下图
这时的点击是没有任何效果的,唯一的作用就是点击一次checkbox会改变状态此时我们也是看不见的
接下来我们给这个label标签添加伪类
/* checked 预先选定复选框或单选按钮。*/
.input:checked +label:before{/*before为伪元素可以在元素之后添加内容*/
display: block;
/* css3中的content字符编码*/
content: "\2665";
/* 复选框里面的√居中*/
text-align: center;
/* 复选框里面的√大小*/
font-size: 20px;
/* 字体的颜色*/
color: red;
/* 复选框勾选后的背景颜色*/
background: blue;
}
接下来我们点击将看到的效果是这样的
然后我们可以随意改变复选框里面的content一位前辈给我的一张content改变样式的图片