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
jQuery implements accordion small case
This article shares the specific code of jQuery t...
Tencent Interview: What are the reasons why a SQL statement executes very slowly? ---Don't watch the regret series (recommended)
To be honest, this question involves a lot of cor...
Example of implementing dashed border with html2canvas
html2canvas is a library that generates canvas fr...
Vue implements small notepad function
This article example shares the specific code of ...
Docker nginx implements one host to deploy multiple sites
The virtual machine I rented from a certain site ...
Vue implements the product tab of the product details page function
This article example shares the specific code of ...
How to use Docker to limit container resources
Problem Peeping In the server, assuming that the ...
Share 20 JavaScript one-line codes
Table of contents 1. Get the value of browser coo...
Commonly used js function methods in the front end
Table of contents 1. Email 2. Mobile phone number...
Detailed explanation of the production principle of jQuery breathing carousel
This article shares the specific process of the j...
Docker link realizes container interconnection
Table of contents 1.1. Network access between con...
jQuery implements a simple comment area
This article shares the specific code of jQuery t...
React implements a highly adaptive virtual list
Table of contents Before transformation: After tr...
Detailed explanation of JavaScript prototype chain
Table of contents 1. Constructors and instances 2...
The difference between Vue interpolation expression and v-text directive
Table of contents 1. Use plugin expressions 2. Us...