Wie kann ich Optionsfelder so gestalten, dass sie wie Schaltflächen aussehen, indem ich nur CSS verwende und dabei die IE8-Kompatibilität beibehalte?

Darstellung von Optionsfeldern anpassen: Sie wie Schaltflächen aussehen lassen

Problem:

Sie zielen um Optionsfelder auf einem Spendenformular zu erstellen, die eher Knöpfen als den typischen kreisförmigen Zifferblättern ähneln. Darüber hinaus muss diese Funktion nahtlos in IE8 funktionieren.

Lösung:

Durch die Verwendung von CSS ist es möglich, das gewünschte Ergebnis zu erzielen, ohne auf externe Frameworks oder wesentliche HTML-Änderungen angewiesen zu sein .

HTML-Struktur:

Die HTML-Struktur bleibt weitgehend erhalten unverändert, unter Verwendung einer Liste (ul) für die Optionsfelder.

CSS-Styling:

• Standard-Optionsfeld mit Deckkraft ausblenden: 0,01.
• Positionieren Sie das Eingabeelement absolut und richten Sie es an der Beschriftung darüber aus.
• Legen Sie die Beschriftung als Blockelement fest und positionieren Sie es absolut so, dass es den gesamten Tastenbereich abdeckt. Verwenden Sie den Cursor: Zeiger für Interaktivität.
• Wenn ein Optionsfeld aktiviert ist, verwenden Sie CSS, um eine Hintergrundfarbe auf die entsprechende Beschriftung anzuwenden und so einen Schaltflächenklickeffekt zu imitieren.

Beispielcode:

.donate-now {
  list-style-type: none;
  margin: 25px 0 0 0;
  padding: 0;
}

.donate-now li {
  float: left;
  margin: 0 5px 0 0;
  width: 100px;
  height: 40px;
  position: relative;
}

.donate-now input[type="radio"] {
  opacity: 0.01;
  z-index: 100;
}

.donate-now input[type="radio"]:checked+label,
.Checked+label {
  background: yellow;
}

.donate-now label {
  padding: 5px;
  border: 1px solid #CCC;
  cursor: pointer;
  z-index: 90;
}

.donate-now label:hover {
  background: #DDD;
}

Beispiel Verwendung:

<ul class="donate-now">
  <li>
    <input type="radio">

Mit diesem Ansatz können Sie das Erscheinungsbild von Optionsfeldern effektiv anpassen, sodass sie Schaltflächen ähneln, ohne die Funktionalität zu beeinträchtigen.

Das obige ist der detaillierte Inhalt vonWie kann ich Optionsfelder so gestalten, dass sie wie Schaltflächen aussehen, indem ich nur CSS verwende und dabei die IE8-Kompatibilität beibehalte?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!