So verwenden Sie CSS3, um Eingabestile für Einzel- und Mehrfachauswahl zu ändern

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.

Lassen Sie mich vorher eine kurze Einführung geben:beforePseudoklasse

:before selector fügt Inhalte vor dem ausgewählten Element ein. 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 abgewählt

(2) Der nächste Schritt besteht darin, CSS zu schreiben, um die Eingabe auszublenden. Fügen Sie einfach Ihren Stil vor der Beschriftung hinzu, die BildEs kann auch ein von Ihnen selbst gezeichneter Kreis sein. 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>

{:;
}{:;
}{:;:;:;:;:;:;:;:;:;
}{:;:;:;:;:;:;:;:;:;
}

Radio durch Kontrollkästchen für Mehrfachauswahl ersetzen Ja .

Hinweis: Verstecken und Pseudoklassenpositionierung sind der Schlüssel

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS3, um Eingabestile für Einzel- und Mehrfachauswahl zu ändern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!