It's embarrassing to say that I had to search Baidu for a long time to change the style of such a commonly used checkbox. What's more annoying is that Baidu couldn't find a feasible solution for a long time. Later I found a lot of styles on csscheckbox.com, but when I tested their compatibility, they failed with IE. This delayed a lot of time. After trying many shortcuts but to no avail, I returned to JQuery UI. Needless to say, the compatibility is very good, and I can draw the style as I like. Here is a record of a checkbox style for your convenience and my future use. ![]() There are three states: default, hover and active. It has been tested and is perfectly compatible with IE8/9/10, FF, etc. Copy code The code is as follows:<!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> |
<<: Thirty HTML coding guidelines for beginners
>>: Interviewer asked how to achieve a fixed aspect ratio in CSS
If there is a backup, it is very simple. You only...
Common scenarios of MySQL: getting the intersecti...
Table of contents 1. Preprocessing 2. Compilation...
Usually the pictures uploaded by users need to be...
The <marquee> tag is a tag that appears in ...
Recently, we have been capturing SQL online for o...
Preface The Windows system that can be activated ...
Recently, I needed to test the zoom video confere...
Configure Java environment variables Here, the en...
What is Publish/Subscribe? Let me give you an exa...
Solve the problem of not being able to access the...
This article shares the specific code of js to im...
The test environment of this experiment: Windows ...
This article introduces blue-green deployment and...
Basic syntax: <input type="hidden" na...