Heim > Artikel > Web-Frontend > Wie kann ich den Kontrollkästchenstil anpassen? Angehängter Code

Wie kann ich den Kontrollkästchenstil anpassen? Angehängter Code

云罗郡主nach vorne: 2018-10-11 16:35:543190Durchsuche

In diesem Artikel erfahren Sie, wie Sie den Kontrollkästchenstil anpassen. Der Code ist beigefügt, der einen gewissen Referenzwert hat. Ich hoffe, dass er für Sie hilfreich ist.

Ändern Sie den nativen Kontrollkästchenstil.

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.

Quellcode

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

Wie passt man oben den Kontrollkästchenstil an? Im Anhang finden Sie eine vollständige Einführung in den Code. Wenn Sie mehr über das CSS3-Video-Tutorial erfahren möchten, schauen Sie sich bitte die chinesische PHP-Website an.

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

Stellungnahme：

Dieser Artikel ist reproduziert unter:cnblogs.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Einführung in die Übergangs- und Animationseigenschaften der CSS3-AnimationNächster Artikel：Einführung in die Übergangs- und Animationseigenschaften der CSS3-Animation

In Verbindung stehende Artikel

Mehr sehen