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
I made a Dockerfile for openresty on centos7 and ...
Duplicate form submission is the most common and ...
The specific code is as follows: The html code is...
<br />I'm basically going crazy with thi...
mysql 5.7.21 winx64 installation and configuratio...
Table of contents 1. Job Execution Fault Toleranc...
Table of contents 1. Introduction to NFS-Ganesha ...
How to host two or more sites on the popular and ...
To deploy war with Docker, you must use a contain...
I typed a wrong mysql command and want to cancel ...
In a recent problem, there is such a phenomenon: ...
Text shadow text-shadow property effects: 1. Lowe...
Simulation tables and data scripts Copy the follo...
Table of contents Official introduction to Node.j...
Rendering principle In the form element, there is...