好看的checkbox款式(多选框)完善适配IE8/9/10,FF等

说起来自叹不如,这般常见的checkbox我更改款式,竟然必须百度搜索,并且百度搜索很久,更可气的是百度搜索很久找不到可行的处理计划方案。

后来在csscheckbox.com上寻找许多款式,結果1测适配性IE不好。这般1来,耽搁了很久的時间。

抄了近道屡试不好,重归JQuery UI,无需说适配性挺好,并且款式自身随心画。

在此纪录1款checkbox的款式,供大伙儿也供我之后便捷应用。
 
有3种情况,default、hover和active,并检测过,能完善适配IE8/9/10,FF等。

拷贝编码
编码以下:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf⑻" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery⑴.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) ⑴6px 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 ⑴6px no-repeat; border:none;
}
</style>
</head>
<body>
<input type="checkbox" id="check" /><label for="check"></label>
</body>
</html>