Maison > Article > interface Web > Comment personnaliser le style des cases à cocher ? Code ci-joint

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

云罗郡主avant: 2018-10-11 16:35:543183parcourir

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.

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>

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!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Introduction aux propriétés de transition et d'animation de l'animation CSS3Article suivant：Introduction aux propriétés de transition et d'animation de l'animation CSS3

Articles Liés

Voir plus