巧用CSS3伪类选择器自定义checkbox和radio的样式

由于原生的checkbox和radio的样式太简陋了,在设计页面的时候,设计师往往会设计自己的checkbox和radio样式。一半情况下,为了适应各个浏览器的兼容性,我们都会用其他的元素替代原生的checkbox和radio,然后用js实现选中和未选中时候的样式,用来模拟checkbox和radio。

例如这种:巧用CSS3伪类选择器自定义checkbox和radio的样式

用其他元素模拟(以checkbox为例):

<div class='checkbox'></div>
$('.checkbox').click(function(){
if($(this).hasClass("checked")){
$(this).removeClass("checked");
}else{
$(this).addClass("checked");
}
});

运用JS添加点击事件,切换选中和未选中的状态。

那么,能仅仅只用样式,改变原生的checkbox的样式呢?

使用CSS实现:


在表单元素中,为了扩大checkbox的点击范围,我们经常用label和checkbox相连,现在也可以运用这个关系,把样式加在label上,隐藏checkbox(设置透明度,不能display:none,否则关联会失效)。

html结构:

<input type="checkbox" id="mycheck" />
<lable for="mycheck">check me</label>

css样式:

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

利用伪元素::before给label添加样式,利用CSS3的伪类选择器:checked,:hover,:focus,:disabled设置不用状态的样式

input[type="checkbox"]:checked + label::before {
content: '\2713';
background: yellowgreen;
}
input[type="checkbox"]:focus + label::before {
box-shadow: 0 0 .1em .1em #58a;
}
input[type="checkbox"]:disabled + label::before {
background: gray;
box-shadow: none;
color: #555;
}

这样,仅仅使用样式就能显示不同状态下的checkbox样式了。

上一篇:遍历datatable的方法汇总


下一篇:C#基础课程之六(临时表)DataTable使用方法