当前位置:   article > 正文

html 多选框的样式,漂亮的checkbox样式(多选框)完美兼容IE8/9/10,FF等

html checkbox样式

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

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

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

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

3511e2bccd2620655dc9d575f6f3496f.png 

有三种状态,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;

}

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:【wpsshop博客】
推荐阅读