Beautiful checkbox style (multiple selection box) perfectly compatible with IE8/9/10, FF, etc.
|
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
Recommend
How to recover accidentally deleted table data in MySQL (must read)
If there is a backup, it is very simple. You only...
How to get the intersection/difference/union of two sets in mysql
Common scenarios of MySQL: getting the intersecti...
Detailed explanation of gcc command usage under Linux system
Table of contents 1. Preprocessing 2. Compilation...
Several ways to store images in MySQL database
Usually the pictures uploaded by users need to be...
The marquee tag in HTML achieves seamless scrolling marquee effect
The <marquee> tag is a tag that appears in ...
MySQL database development specifications [recommended]
Recently, we have been capturing SQL online for o...
Synology NAS uses Docker container to build KMS activation server to activate Windows system and office (operation steps)
Preface The Windows system that can be activated ...
Practical way to build selenium grid distributed environment with docker
Recently, I needed to test the zoom video confere...
How to configure Java environment variables in Linux system
Configure Java environment variables Here, the en...
js simple and crude publish and subscribe sample code
What is Publish/Subscribe? Let me give you an exa...
Perfect solution to the problem of not being able to access the port of the docker container under Windows 10
Solve the problem of not being able to access the...
js to realize the mouse following game
This article shares the specific code of js to im...
Detailed explanation of the four transaction isolation levels in MySQL
The test environment of this experiment: Windows ...
How to use nginx to simulate canary release
This article introduces blue-green deployment and...
Introduction and examples of hidden fields in HTML
Basic syntax: <input type="hidden" na...