Comment personnaliser le style des cases à cocher avec CSS ? (exemple de code)

Comment personnaliser le style des cases à cocher avec CSS ? Cet article vous expliquera comment utiliser CSS pour modifier le style de case à cocher natif et personnaliser le style de case à cocher. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Jetons d'abord un coup d'oeil à l'effet

Principe

1. Utilisez l'apparence des attributs 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.

Exemple de 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>

Résumé : Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'apprentissage de chacun. Pour plus de didacticiels connexes, veuillez visiter le Tutoriel vidéo CSS  !

Recommandations associées :

Tutoriel vidéo de formation sur le bien-être public php

Manuel en ligne CSS

Tutoriel graphique div/css

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!