说起来汗颜,如此常用的checkbox我改变样式,居然需要百度,而且百度很久,更可气的是百度很久找不到可行的解决方案。 后来在csscheckbox.com上找到很多样式,结果一测兼容性IE不行。如此一来,耽误了很久的时间。 抄了近道屡试不行,回归JQuery UI,不用说兼容性挺好,而且样式自己随心画。 在此记录一款checkbox的样式,供大家也供我以后方便使用。 有三种状态,default、hover和active,并测试过,能完美兼容IE8/9/10,FF等。 复制代码代码如下: <br />$(function() { <br />$( "#check" ).button(); <br />$( "#format" ).buttonset(); <br />}); <br /> <br />.ui-button-text-only .ui-button-text { <br />padding: 8px; <br />} <br />.ui-state-default, <br />.ui-widget-content .ui-state-default, <br />.ui-widget-header .ui-state-default { <br />background: url(images/safari-checkbox.png) 0 0 no-repeat; border:none; <br />} <br />.ui-state-hover, <br />.ui-widget-content .ui-state-hover, <br />.ui-widget-header .ui-state-hover, <br />.ui-state-focus, <br />.ui-widget-content .ui-state-focus, <br />.ui-widget-header .ui-state-focus { <br />background: url(images/safari-checkbox.png) -16px 0 no-repeat; border:none; <br />} <br />.ui-state-active, <br />.ui-widget-content .ui-state-active, <br />.ui-widget-header .ui-state-active { <br />background: url(images/safari-checkbox.png) 0 -16px no-repeat; border:none; <br />} <br />