Beautiful checkbox style (multiple selection box) perfectly compatible with IE8/9/10, FF, etc.

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...

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...

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...