How to customize checkbox style with css? (code example)

How to customize checkbox style in css? This article will introduce to you how to use css to modify the native checkbox style and customize the checkbox style. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Let’s take a look at the effect first

Principle

1. Use the CSS3 attribute appearance .

This attribute (forced) changes (changes) the default (native) style.

Firefox supports the alternative -moz-appearance attribute; Safari and Chrome support the alternative -webkit-appearance attribute; IE does not support this attribute.

So you can use this attribute to cancel the native style of the checkbox.

2. Use:checked selector

Change the style when the checkbox is selected.

3. :after selector content attribute

:The after selector inserts content after the element.

We can then use text-aligen and line-height to center the content.

Example code:

nbsp;html>
    <meta>
    <title>checkbox</title>
    <style>
        input {
            width: 16px;
            height: 16px;
            margin-top: 0;
            background-color: #fff;            
            border: 1px solid #c9c9c9;
            border-radius: 2px;
            color: #fff;
            text-align: center;
            line-height: 15px;
            -webkit-appearance:none;
            -moz-appearance:none;
            -ms-appearance:none;
            -o-appearance:none;
            appearance:none;
            outline: none;
        }

        input:hover {
            border-color: #43adea;
        }

        input:checked {
            color: #fff;
            background-color: #43adea;
            border: 1px solid #43adea;
        }

        input:after {
            content: "✔";
        }
    </style>
    <input>
    <input>

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's learning. For more related tutorials, please visit CSS Video Tutorial!

Related recommendations:

php public welfare training video tutorial

CSS Online Manual

##div/css graphic tutorial

The above is the detailed content of How to customize checkbox style with css? (code example). For more information, please follow other related articles on the PHP Chinese website!