Wie kann ich den Kontrollkästchenstil mit CSS anpassen? (Codebeispiel)

Wie kann ich den Kontrollkästchenstil mit CSS anpassen? In diesem Artikel erfahren Sie, wie Sie mit CSS den nativen Kontrollkästchenstil ändern und ihn anpassen können. Ich hoffe, dass er für Freunde hilfreich ist.

Werfen wir zunächst einen Blick auf die Wirkung

Prinzip

1. Verwenden Sie das CSS3-Attribut „Erscheinungsbild“.

Dieses Attribut (erzwingt) ändert (ändert) den standardmäßigen (nativen) Stil.

Firefox unterstützt das alternative Attribut -moz-appearance; Safari und Chrome unterstützen das alternative Attribut -webkit-appearance;

Sie können dieses Attribut also verwenden, um den nativen Stil des Kontrollkästchens aufzuheben.

2. Verwenden Sie den markierten Selektor

Ändern Sie den Stil, wenn das Kontrollkästchen aktiviert ist.

3. :after Selector + Inhaltsattribut

:after Selector fügt Inhalt nach dem Element ein.

Wir verwenden lediglich text-aligen und line-height, um den Inhalt zu zentrieren.

Beispielcode:

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>

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Lernen aller hilfreich sein wird. Weitere verwandte Tutorials finden Sie unter CSS-Video-Tutorial !

Verwandte Empfehlungen:

PHP-Video-Tutorial zur öffentlichen Wohlfahrtsschulung

CSS-Online-Handbuch

Div/CSS-Grafik-Tutorial

Das obige ist der detaillierte Inhalt vonWie kann ich den Kontrollkästchenstil mit CSS anpassen? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!