Detaillierte Erläuterung der CSS-Änderung des Eingabestils für Einzelauswahl und Mehrfachauswahl

Bei der Projektentwicklung stoßen wir häufig auf Situationen, in denen wir die Eingabestile für Einzelauswahl und Mehrfachauswahl ändern müssen. Heute stelle ich Ihnen eine einfache Möglichkeit vor, die Eingabestile für Einzelauswahl und Mehrfachauswahl zu ändern.

Zuvor stellen wir kurz die :before-Pseudoklasse

:before vor, die den Selektor Inhalt vor dem ausgewählten Element einfügt. Verwenden Sie das Inhaltsattribut , um den einzufügenden Inhalt anzugeben (Inhalt ist erforderlich).

Ich glaube, das ist nicht schwer zu verstehen. Lassen Sie uns zunächst die Idee verstehen:

(1) Verwenden Sie zunächst label, um eine Markierung für das Eingabeelement in HTML zu definieren Wenn Sie auf die Beschriftung klicken, wird die entsprechende Eingabe ebenfalls ausgewählt oder deaktiviert. (2) Der nächste Schritt besteht darin, CSS zu schreiben. Fügen Sie einfach Ihren Stil vor der Beschriftung hinzu Ein Bild oder Sie können es selbst zeichnen. Der Kreis unten ist der Kreis, den ich geschrieben habe. Natürlich kann er auch durch ein Hintergrundbild ersetzt werden.

input[type="radio"]+label:before是未选中状态的样式

input[type="radio"]:checked+label:before是选中状态的样式

<input type="radio" id="nationality1"><label for="nationality1">中国</label></p>

Ersetzen Sie das Radio durch ein Kontrollkästchen, um mehrere Auswahlmöglichkeiten zu treffen.

input[type="radio"]{
    display:none;
}
input[type="radio"]+label{
    position: relative;
}
input[type="radio"]+label:before{
    content: "";
    width:25px;
    height:25px;
    background: #ffffff;
    border:2px solid $gray;
    position: absolute;
    bottom:3px;
    left: -35px;
    border-radius: 50%;
}                                                   
input[type="radio"]:checked+label:before{
    content: "";
    width: 25px;
    height: 25px;
    background: #34c0f5;
    position: absolute;
    bottom:3px;
    left: -35px;
    z-index: 99;
    border-radius: 50%;
}

Hinweis: Verstecken und Pseudoklassenpositionierung sind der Schlüssel

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der CSS-Änderung des Eingabestils für Einzelauswahl und Mehrfachauswahl. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!