漂亮的checkbox样式（多选框）

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

漂亮的checkbox样式（多选框）相关推荐

ionic之样式复选框
1.实例背景 ionic复选框用的是checkbox,checkbox有各种各样的样式 2.实例源码 <!DOCTYPE html> <html><head>< ...
html给radio添加图片,使用纯CSS自定义radio(单选框)和checkbox（多选框）的样式
radio和checkbox由于不同的浏览器显示的样式不一致,因此我们需要自定义radio(单选框)和checkbox(多选框)的样式.基本原理就是贱radio和checkbox的自定义样式设置成图片 ...
css复选框样式_使用CSS样式复选框
css复选框样式 Introduction: 介绍: Sometimes we want to develop a website or web page that would contain a f ...
ReactHooks+Antd Checkbox Group多选框组单独禁用其中选项
antd官方文档中Checkbox Group给出的api如下: 据图可知,其中Group 的 api 只有一个disabled,它的作用是使整个group选项全部失效,达不到我们的效果,但是Chec ...
C# CheckBox/CheckedListBox 复选框/复选框列表
目录 1 CheckBox获取选中项文本 2 CheckedListBox获取选中项文本 2.1 CheckedListBox常用属性 2.2 CheckedListBox常用方法 3 参考博客 1 ...
html复选框不能勾选,html – 选中时CSS样式复选框 – 不起作用
我有以下静态html文件,我花时间为我们的客户建立一个CMS Web应用程序站点. 在中间部分,有一个垂直的复选框数组(我用它来设计它),我跟着许多在线教程,这些教程引导我使用这个网站链接. 我下载源 ...
android checkbox右边,勾选框居右显示的AppCompatCheckBox
1:需求如果要实现勾选框居右的AppCompatCheckBox怎么办. image.png 肯定有人会说直接用TextView加一个选择器给DrawableRight不就可以了吗?但是这样有一点不 ...
java中判断复选框是否被选中_[Java教程]jquery如何判断checkbox（复选框）是否被选中...
[Java教程]jquery如何判断checkbox(复选框)是否被选中 0 2013-08-15 18:00:14 谁都知道在html 如果一个复选框被选中是 checked="che ...
jQuery --- 实现 checkbox 样式的单选框
早就想写点博客了一直懒着动最近发现一些写过的东西都不记得了,下决心把自己平时遇到的问题.得到的经验记录下来,希望能大家一点帮助这是之前写的一个模态框要求单选但是要求radio的默认样式 ...

漂亮的checkbox样式（多选框）

漂亮的checkbox样式（多选框）相关推荐

最新文章

热门文章

漂亮的checkbox样式 （多选框）

漂亮的checkbox样式 （多选框）相关推荐

最新文章

热门文章

漂亮的checkbox样式（多选框）

漂亮的checkbox样式（多选框）相关推荐