美工统筹SEO，为企业电子商务营销助力！
标致的checkbox款式(多选框)完善兼容IE8/9/10，FF等
一佰互联网站建造(www.taishanly.com) 宣布日期 2020-04-20 08:53:24 阅读数: 306
提及来汗颜，如斯经常利用的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>
厥后在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>
一佰互联是天下着名建站品牌办事商,咱们有九年、网站建造、网页设想、php开辟和域名注册及假造主机办事经历，供给的办事更是天下着名。最近几年来还整合团队上风自立开辟了可视化多用户”“3.0平台版，拖拽排版网站建造设想，轻松完成pc站、手机微网站、小法式、APP一体化全网营销网站扶植 ，已胜利的为天下上百家收集公司供给自助建站平台搭建办事。
