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 implement Nginx configuration detection service status
1. Check whether the check status module is insta...
Sample code for implementing image drawer effect with CSS3
As usual, let’s first post the picture effect: Th...
How to install the standalone version of spark in linux environment without using hadoop
Big data continues to heat up, and if you are not...
Implementation of breakpoint resume in vue-video-player
In a recent project, I needed to implement the fu...
Sharing of experience on repairing MySQL innodb exceptions
A set of MySQL libraries for testing. The previou...
How to count the number of specific characters in a file in Linux
Counting the number of a string in a file is actu...
Vue/react single page application back without refresh solution
Table of contents introduction Why bother? Commun...
Example code for implementing raindrop animation effect with CSS
Glass Windows What we are going to achieve today ...
HTML tags: sub tag and sup tag
Today I will introduce two HTML tags that I don’t...
Summary of various methods of implementing article dividing line styles with CSS
This article summarizes various ways to implement...
Summary of the deployment of Tomcat cluster and Nginx load balancing based on Docker
Table of contents Written in front 1. Ngixn image...
Solution for Tomcat to place configuration files externally
question When we are developing normally, if we w...
Several situations where div is covered by iframe and their solutions
Similar structures: Copy code The code is as foll...
How to elegantly back up MySQL account information
Preface: I recently encountered the problem of in...
MySQL scheduled task example tutorial
Preface Since MySQL 5.1.6, a very unique feature ...