漂亮的checkbox样式(多选框)完美兼容IE8/9/10，FF等
2013-08-11 13:20 来源: 站长圈 点击:
点评：在此记录一款checkbox的样式，供大家也供我以后方便使用，有三种状态，default、hover和active，并测试过，能完美兼容IE8/9/10，FF等，感兴趣的朋友可以参考下，希望对大家有所帮助
说起来汗颜，如此常用的checkbox我改变样式，居然需要百度，而且百度很久，更可气的是百度很久找不到可行的解决方案。后来在csscheckbox.com上找到很多样式，结果一测兼容性IE不行。如此一来，耽误了很久的时间。抄了近道屡试不行，回归JQuery UI，不用说兼容性挺好，而且样式自己随心画。在此记录一款checkbox的样式，供大家也供我以后方便使用。有三种状态，default、hover和active，并测试过，能完美兼容IE8/9/10，FF等。
代码如下:
<!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>
