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

Solve the problem of the container showing Exited (0) after docker run

I made a Dockerfile for openresty on centos7 and ...

Summary of methods to prevent users from submitting forms repeatedly

Duplicate form submission is the most common and ...

Sample code for achieving small triangle border effect with pure CSS3+DIV

The specific code is as follows: The html code is...

A brief discussion on Flink's fault-tolerant mechanism: job execution and daemon

Table of contents 1. Job Execution Fault Toleranc...

Detailed process of building nfs server using Docker's NFS-Ganesha image

Table of contents 1. Introduction to NFS-Ganesha ...

How to configure two or more sites using Apache Web server

How to host two or more sites on the popular and ...

Implementation of deploying war package project using Docker

To deploy war with Docker, you must use a contain...

What should I do if I want to cancel an incorrect MySQL command?

I typed a wrong mysql command and want to cancel ...

A brief discussion on the problem of Docker run container being in created state

In a recent problem, there is such a phenomenon: ...

Detailed explanation of CSS3 text shadow text-shadow property

Text shadow text-shadow property effects: 1. Lowe...

Understanding what Node.js is is so easy

Table of contents Official introduction to Node.j...

CSS form validation function implementation code

Rendering principle In the form element, there is...