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

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

How to use mixins in Vue

Analysis and application of irregular picture waterfall flow principle

How to implement Docker container self-start

About using Alibaba's iconfont vector icon in Vue

React event mechanism source code analysis

JavaScript data visualization: ECharts map making

Detailed explanation of monitoring NVIDIA GPU usage under Linux

Nginx request limit configuration method

Linux method example to view all information of the process

Common JavaScript memory errors and solutions

Recommend

Implementation of docker-compose deployment project based on MySQL8

Linux uses Rsync+Inotify to achieve real-time synchronization of local and remote data

Native js drag and drop function to create a slider example code

Summary of examples of common methods of JavaScript arrays

Introduction to cloud native technology kubernetes (K8S)

Analysis of the methods of visual structure layout design for children's websites

Solution to the problem of invalid width setting for label and span

11 Examples of Advanced Usage of Input Elements in Web Forms

How to deploy Redis 6.x cluster through Docker

How to fix the WeChat applet input jitter problem

MySQL multi-table join query example explanation

How to configure Nginx virtual host in CentOS 7.3

Summary of basic usage of $ symbol in Linux

How to start Vue project with M1 pro chip

my.cnf parameter configuration to optimize InnoDB engine performance