Home > Article > Web Front-end > How to customize checkbox style? Attached code

How to customize checkbox style? Attached code

云罗郡主forward: 2018-10-11 16:35:543202browse

The content of this article is about how to customize the checkbox style? The code is attached, which has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Modify the native checkbox style.

Effect

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.

Source code

<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <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></head><body>
    <input type="checkbox">
    <input type="checkbox"></body></html>

The above is how to customize the checkbox style? Attached is a full introduction to the code. If you want to know more about CSS3 video tutorial, please pay attention to the PHP Chinese website.

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

Statement：

This article is reproduced at:cnblogs.com. If there is any infringement, please contact admin@php.cn delete

Previous article：Introduction to transition and animation properties of css3 animationNext article：Introduction to transition and animation properties of css3 animation

See more

How to customize checkbox style? Attached code

Related articles