CSS 揭秘(6)--自定义复选框

Posted by liveipool on February 8, 2017

自定义复选框

input元素和label标签:label标签为 input 元素定义标注,label标签的for属性应该和input元素的id属性值相同,这样在进行交互时它俩才能相互对应。

一直以来,复选框和单选框这两种空间都难以进行样式的设置。不过,在选择符(第三版)http://w3.org/TR/css3-selectors中,我们得到了一个新的伪类:checked。这个伪类只有在复选框被勾选时才会匹配。
注意,伪类选择符:checked和属性选择符[checked]之间的区别在于:属性选择符不会根据用户的交互行为进行更新,因为用户的交互并不会影响HTML的标签上的属性。

那么我们要如何通过勾选状态来给哪个元素设置样式呢?
其实有一个元素总是跟复选框形影不离,他就是< label >。当它与复选框关联之后,也可以起到触发开关的作用。
因此我们的思路为:我们可以给label添加生成性的内容(伪元素),并基于复选框的状态来为其设置样式。然后,就可以把真正的复选框隐藏起来,再把生成性内容美化一番,用来顶替原来的复选框。

我们从下面的代码开始:

// jade
div.m-200.fs-30	
	input(type="checkbox" id="awesome")
	label(for="awesome") Awesome!

31.1.png
给伪元素加上样式:

input[type="checkbox"] + label::before {
	content: '\a0';
	display: inline-block;
	vertical-align: .2em;
	width: .8em;
	height: .8em;
	margin-left: .2em;
	border-radius: .2em;
	background: silver;
	text-indent: .15em;
	line-height: .65;
}

31.2.png
接下来再给复选框的勾选状态加上不同的样式:

input[type="checkbox"]:checked + label::before {
	content: '\2713';
	background: yellowgreen;
}

31.3.png
现在,我们需要把原来的复选框以一种不可损失可访问性的方式隐藏起来,这意味着我们不能使用display:none,因为那样会把它从键盘tab键切换焦点的队列中完全删除。我们采用clip(裁剪一个绝对定位元素)来裁剪出一个大小为0的区域:

input[type="checkbox"] {
	position: absolute;
	clip: rect(0,0,0,0);
}

于是现在就变成这样的效果了:
31.4.png
至此,就实现了一个较为完整的优化单选框或复选框的效果,至于怎么优化,就在以后的项目中灵活应用了。

最后要注意一点:尽量避免把复选框设置为圆形,因为大多数用户会把圆形的开关理解为单选框,这个 道理也适用于方形的单选框。

是这样吗?我个人觉得还好,以前也没太注意过,以后留意一下。

另外有一种情况,如果想用一个复选框来实现开关式按钮,可以通过以下代码来实现:

// jade
div.m-200.fs-30
	input(type="checkbox" id="awesome")
	label(for="awesome") Awesome! 	

// css
input[type="checkbox"] {
	position: absolute;
	clip: rect(0,0,0,0);
}

input[type="checkbox"] + label {
	display: inline-block;
	padding: .3em .5em;
	background: #ccc;
	background-image: linear-gradient(#ddd, #bbb);
	border: 1px solid rgba(0,0,0,.2);
	border-radius: .3em;
	box-shadow: 0 1px #fff inset;
	text-align: center;
	text-shadow: 0 1px 1px #fff;
}

input[type="checkbox"]:checked + label,
input[type="checkbox"]:active + label {
	box-shadow: .05em .1em .2em rgba(0,0,0,.6) inset;
	border-color: rgba(0,0,0,.3);
	background: #bbb;
}

停用时,就是浮起的状态:
31.5.png
启用时,就是按下的状态:
31.6.png
这就是一个开关式按钮。