TA的每日心情![](source/plugin/dsu_paulsign/img/emot/kx.gif) | 开心 2021-12-13 21:45 |
---|
签到天数: 15 天 [LV.4]偶尔看看III
|
说起来汗颜,如此常用的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>
复制代码
|
|