Comment personnaliser le style des cases à cocher ? Code ci-joint-tutoriel CSS-php.cn

Comment personnaliser le style des cases à cocher ? Code ci-joint

云罗郡主

Libérer： 2018-10-11 16:35:53

avant

3220 Les gens l'ont consulté

Le contenu de cet article explique comment personnaliser le style de la case à cocher ? Le code est joint, qui a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Comment personnaliser le style des cases à cocher ? Code ci-joint

Modifier le style natif de la case à cocher.

Effet

Principe

1. Utilisez l'apparence de l'attribut CSS3.

Cet attribut (force) change (change) le style (natif) par défaut.

Firefox prend en charge l'attribut alternatif -moz-apparence ; Safari et Chrome prennent en charge l'attribut alternatif -webkit-apparence ; IE ne prend pas en charge cet attribut.

Vous pouvez donc utiliser cet attribut pour annuler le style natif de la case à cocher.

2. Utiliser : sélecteur coché

Modifiez le style lorsque la case est cochée.

3. :after selector + content attribut

:after selector insère du contenu après l'élément.

Nous utilisons simplement text-aligen et line-height pour centrer le contenu.

Code source

<!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>

Copier après la connexion

Ce qui précède explique comment personnaliser le style de la case à cocher ? Vous trouverez ci-joint une introduction complète au code. Si vous souhaitez en savoir plus sur le Tutoriel vidéo CSS3, veuillez faire attention au site Web PHP chinois.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!