checkbox改变样式

开发工具与关键技术：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";
/*	复选框里面的&radic;居中*/
    text-align: center;
/*	复选框里面的&radic;大小*/
    font-size: 20px;
/*	字体的颜色*/
    color: red;
/*  复选框勾选后的背景颜色*/
	background: blue;
}

接下来我们点击将看到的效果是这样的
在这里插入图片描述
然后我们可以随意改变复选框里面的content一位前辈给我的一张content改变样式的图片

猜你喜欢