Wie kann ich Optionsfelder mithilfe von HTML und CSS durch Bilder ersetzen?

Optionsfelder mit Bildplatzhaltern

Um Optionsfelder durch Bilder zu ersetzen, gehen Sie folgendermaßen vor:

1. Optionsfeld und Bild in einschließen: Platzieren Sie das Optionsfeld und das entsprechende Bild in einem Element, um sie zu verknüpfen.
2. Optionsfeld ausblenden: Um das Erscheinungsbild des Optionsfelds zu entfernen, setzen Sie seine Position auf absolut, die Deckkraft auf 0 und Breite und Höhe auf 0.
3. Zielbild mit Geschwisterauswahl: Verwenden Sie die benachbarte Geschwisterauswahl ( ), um das Bild neben dem ausgeblendeten Radio anzuvisieren Schaltfläche.
4. Stil aktivierter Bilder: Wenden Sie Stile auf das Bild neben dem aktivierten Optionsfeld an, z. B. einen Umriss oder eine Farbänderung.
5. Geben Sie Alt an Text: Stellen Sie sicher, dass das Bild aus Gründen der Barrierefreiheit über ein Alt-Attribut verfügt, da es als Optionsfeld dient label.

Hier ist ein Beispiel-CSS- und HTML-Code, der diese Lösung demonstriert:

/* HIDE RADIO */
[type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
[type=radio] + img {
  cursor: pointer;
}

/* CHECKED STYLES */
[type=radio]:checked + img {
  outline: 2px solid #f00;
}

<label>
  <input type="radio" name="test" value="small" checked>
  <img src="https://via.placeholder.com/40x60/0bf/fff&text=A" alt="Option 1">
</label>

<label>
  <input type="radio" name="test" value="big">
  <img src="https://via.placeholder.com/40x60/b0f/fff&text=B" alt="Option 2">
</label>

Das obige ist der detaillierte Inhalt vonWie kann ich Optionsfelder mithilfe von HTML und CSS durch Bilder ersetzen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!