How to customize checkbox style? Attached code-CSS Tutorial-php.cn

How to customize checkbox style? Attached code

云罗郡主

Release： 2018-10-11 16:35:53

forward

3220 people have browsed it

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.

How to customize checkbox style? Attached code

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>

Copy after login

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!