丁德双的博客
用心的博客
漂亮的checkbox样式 (多选框)
2015-03-25 17:12:44   阅读1214次

说起来汗颜,如此常用的checkbox我改变样式,居然需要百度,而且百度很久,更可气的是百度很久找不到可行的解决方案。

后来在csscheckbox.com上找到很多样式,结果一测兼容性IE不行。如此一来,耽误了很久的时间。

抄了近道屡试不行,回归JQuery UI,不用说兼容性挺好,而且样式自己随心画。

在此记录一款checkbox的样式,供大家也供我以后方便使用。

有三种状态,default、hover和active,并测试过,能完美兼容IE8/9/10,FF等。

[html]
view plaincopy
<!doctype html>  
<html lang="en">  
<head>  
 <meta charset="utf-8" />  
 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />  
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>  
 <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>  
 <script>  
 $(function() {  
   $( "#check" ).button();  
   $( "#format" ).buttonset();  
 });  
 </script>  
<style>  
.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;  
}  
</style>  
</head>  
<body>  
<input type="checkbox" id="check" /><label for="check"></label>  
</body>  
</html>




-----------------------------------------------------
转载请注明来源此处
原地址:#

-----网友评论----
暂无评论
-----发表评论----
微网聚博客乐园 ©2014 blog.mn886.net 鲁ICP备14012923号   网站导航