Ausblenden Sie zuerst die Standard-Optionszahlen, 2. Erstellen Sie einen benutzerdefinierten Indikator mit CSS, 3. Fügen Sie den inneren Punkt des ausgew?hlten Zustands über die geprüfte Pseudoklasse hinzu. Erzielen Sie sch?ne und zug?ngliche benutzerdefinierte Optionsfelder, indem Sie das tats?chliche Eingangsfeld auf unsichtbares Einstellen festlegen, aber deren Funktionalit?t beibehalten und benutzerdefinierte Stilelemente mit benachbarten Geschwister -Selektoren verbinden.

Das Erstellen eines benutzerdefinierten Optionsfelds mit CSS ist eine gro?artige M?glichkeit, das Erscheinungsbild Ihrer Formulare zu verbessern und gleichzeitig die Zug?nglichkeit beizubehalten. Der Schlüssel ist, das Standard -Optionsfeld auszublenden und ein benutzerdefiniertes Element an seiner Stelle mit CSS zu stylen. Hier erfahren Sie, wie man es Schritt für Schritt macht.

? Schritt 1: Grundlegende HTML -Struktur

Beginnen Sie mit einem in einem Etikett eingewickelten Standard -Funkeingang. Dies gew?hrleistet die Zug?nglichkeit und erleichtert das Stil.

 <label class = "benutzerdefinierte radio">
  <Eingabe type = "radio" name = "option" value = "option1">
  <span class = "Radio-Indicator"> </span>
  Option 1
</label>

<label class = "benutzerdefinierte radio">
  <Eingabe type = "radio" name = "option" value = "option2">
  <span class = "Radio-Indicator"> </span>
  Option 2
</label>

? Schritt 2: Ausblenden Sie die Standard -Optionsschaltfl?che "Standard"

Verwenden Sie CSS, um die Standardeingabe visuell auszublenden und gleichzeitig zug?nglich zu halten (z. B. für Bildschirmleser).

 .Custom-radio-Eingabe {
  Position: absolut;
  Deckkraft: 0;
  Cursor: Zeiger;
  H?he: 0;
  Breite: 0;
}

Dies h?lt die Eingabe funktionsf?hig, aber unsichtbar.

? Schritt 3: Style den benutzerdefinierten Indikator

Stylen Sie nun die span.radio-indicator , um wie ein benutzerdefiniertes Optionsfeld auszusehen.

 .Radio-Indicator {
  H?he: 18px;
  Breite: 18px;
  Grenze: 2PX Solid #999;
  Grenzradius: 50%;
  Anzeige: Inline-Block;
  Rand-Rechts: 8px;
  Position: Relativ;
  übergang: Alle 0,2s leichten;
}

? Schritt 4: Fügen Sie den inneren Punkt bei der Auswahl hinzu

Verwenden Sie die :checked Pseudo-Klasse über das Etikett, um den ausgew?hlten Zustand zu stylen.

 .Custom-Radio-Eingabe: überprüft ~ .Radio-Indicator :: After {{
  Inhalt: "";
  Position: absolut;
  Top: 50%;
  Links: 50%;
  Transformation: Translate (-50%, -50%);
  Breite: 10px;
  H?he: 10px;
  Hintergrundfarbe: #007BFF;
  Grenzradius: 50%;
  übergang: Hintergrund 0,2s Leichtigkeit;
}

Wenn der Eingang überprüft wird, erscheint in der Mitte des Indikators ein blauer Punkt.

? Schritt 5: Zieh- und Fokuszust?nde hinzufügen (optional, aber empfohlen)

Verbesserung der Benutzerfreundlichkeit mit visuellem Feedback.

 .Custom-radio: Hover-Eingabe ~ .Radio-Indicator {
  Grenzfarbe: #007BFF;
}

.
  Box-Shadow: 0 0 0 3px RGBA (0, 123, 255, 0,3);
}

? Schlussnotizen

• Barrierefreiheit : Da die tats?chliche <input> noch vorhanden und mit dem Etikett zugeordnet ist, werden die Bildschirmleser und die Tastaturnavigationsarbeit normal zugeordnet.
• Cross-Browser : Diese Methode funktioniert in allen modernen Browsern.
• Anpassung : Sie k?nnen die Farben, Gr??en und Animationen einfach zu Ihrem Design ?ndern.

? Pro -Tipps

• Verwenden Sie em oder rem -Einheiten zur Skalierbarkeit.
• Fügen Sie bei Bedarf einen behinderten Zustand hinzu:

   .
    Grenzfarbe: #CCC;
    Hintergrundfarbe: #f0f0f0;
    Cursor: nicht verurteilt;
  }

• Erw?gen Sie die Verwendung von CSS -Variablen für konsistente Themen.

---

Das war's! Sie haben jetzt voll funktionsf?hige, zug?ngliche und stilvolle, benutzerdefinierte Optionsfelder. Im Grunde genommen verstecken Sie einfach die wirkliche Eingabe, f?lschen Sie die Visuals und verbinden Sie sie mit Geschwister -Selektoren. Nicht auff?llig, aber effektiv.

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein benutzerdefiniertes Optionsfeld mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!