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

Alibaba Cloud domain name and IP binding steps and methods

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

Alibaba Cloud domain name and IP binding steps and methods

Example method to find keywords and their preceding and following information in Linux logs

A detailed introduction to setting up Jenkins on Tencent Cloud Server

Hbase Getting Started

MySQL 8.0.17 installation and simple configuration tutorial under macOS

Windows Server 2008 R2 Multi-User Remote Desktop Connection Licensing

How to build Nginx image server with Docker

Change the MySQL database engine to InnoDB

How to use type enhancement without typingscript

Sample code for converting video using ffmpeg command line

Recommend

Summary of several implementations of returning to the top in HTML pages

Realization of real-time file synchronization between Linux servers

Detailed explanation of Nginx static service configuration (root and alias instructions)

Detailed explanation of nginx upstream configuration and function

Do you know the common MySQL design errors?

Linux Disk Quota Management Graphical Example

The Linux operating system uses Python to implement the visualization function of the task manager

CSS code abbreviation div+css layout code abbreviation specification

Several common methods of sending requests using axios in React

Implementation of element multiple form validation

Implementation example of react project from new creation to deployment

Summarize several common ranking problems in MySQL

wget downloads the entire website (whole subdirectory) or a specific directory

MySQL 5.7.18 download and installation process detailed instructions

WeChat Mini Program Lottery Number Generator