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!
