漂亮的checkbox样式（多选框）

最新推荐文章于 2024-01-31 16:21:47 发布

linlin_juejue

最新推荐文章于 2024-01-31 16:21:47 发布

阅读量6.1w

点赞数 2

分类专栏：技术花园文章标签： CSS HTML 前端 IE UI Web CheckBox

本文链接：https://blog.csdn.net/linlin_juejue/article/details/9813199

版权

技术花园专栏收录该内容

37 篇文章 0 订阅

订阅专栏

说起来汗颜，如此常用的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>

linlin_juejue

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
漂亮的checkbox样式（多选框）

说起来汗颜，如此常用的checkbox我改变样式，居然需要百度，而且百度很久，更可气的是百度很久找不到可行的解决方案。后来在csscheckbox.com上找到很多样式，结果一测兼容性IE不行。如此一来，耽误了很久的时间。抄了近道屡试不行，回归JQuery UI，不用说兼容性挺好，而且样式自己随心画。在此记录一款checkbox的样式，供大家也供我以后方便使用。有三种状态，de
复制链接

扫一扫