漂亮的checkbox样式(多选框)完美兼容IE8/9/10,FF等
说起来汗颜,如此常用的checkbox我改变样式,居然需要百度,而且百度很久,更可气的是百度很久找不到可行的解决方案。
后来在csscheckbox.com上找到很多样式,结果一测兼容性IE不行。如此一来,耽误了很久的时间。
抄了近道屡试不行,回归JQuery UI,不用说兼容性挺好,而且样式自己随心画。
在此记录一款checkbox的样式,供大家也供我以后方便使用。
有三种状态,default、hover和active,并测试过,能完美兼容IE8/9/10,FF等。
复制代码代码如下:
$(function() {
$( "#check" ).button();
$( "#format" ).buttonset();
});
.ui-button-text-only .ui-button-text {
padding: 8px;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
background: url(images/safari-checkbox.png) 0 0 no-repeat; border:none;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
background: url(images/safari-checkbox.png) -16px 0 no-repeat; border:none;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
background: url(images/safari-checkbox.png) 0 -16px no-repeat; border:none;
}
相关阅读:
Win7系统安装软件提示Nsis Error怎么解决?
Repeater与ListView功能概述及使用介绍
Android中实现毛玻璃效果的3种方法
Win10 Mobile正式版将在12月份开始推送:将覆盖更多其他设备
Win7系统使用Print Screen全屏截图失败且出现黑屏的解决方法
Java 交换两个变量的数值实现方法
Javascript基础教程之数据类型转换
Linux下快速安装部署远程连接软件SSH的简明教程
Android使用okHttp(get方式)登录
关于几个常见的css字体设定问题探讨
C++ new、delete(new[]、delete[])操作符重载需要注意的问题
Mac如何手动设置软件更新检查周期默认为5天检查一次
js实现简单锁屏功能实例
剖析Linux系统中的文件系统路径