Wie kann ich Optionsschaltflächen nur mithilfe von CSS wie Schaltflächen aussehen lassen?

Optionsfelder wie Schaltflächen aussehen lassen

Optionsfelder in ein Spendenformular zu integrieren ist üblich, aber viele bevorzugen stattdessen ein knopfähnliches Erscheinungsbild die traditionellen Kreiszifferblätter. Um dies zu erreichen, kann CSS effektiv genutzt werden, ohne dass zusätzliche HTML- oder JavaScript-Bibliotheken erforderlich sind.

Schritt 1: HTML-Struktur

Behalten Sie die ursprüngliche HTML-Struktur des bei Optionsfelder. Zum Beispiel:

<li><input type="radio">

Schritt 2: CSS-Styling

Passen Sie das Erscheinungsbild mit CSS an:

/* Reset styles */
.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 label,
.donate-now input {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Hide the radio button visually */
.donate-now input[type="radio"] {
  opacity: 0.01;
  z-index: 100;
}

/* Highlight the button when checked */
.donate-now input[type="radio"]:checked+label,
.Checked+label {
  background: yellow;
}

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

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

Erklärung:

• Stile zurücksetzen entfernt Standardbrowser-Stil.
• Elemente neu positionieren mit absoluter Positionierung ermöglicht, dass das Optionsfeld die Beschriftung überlappt.
• Durch Ausblenden des Optionsfelds wird es optisch unsichtbar .
• Erkennen eines aktivierten Status ändert die Hintergrundfarbe des zugehörigen Status Beschriftung.
• Visuelle Verbesserungen verleihen der Schaltfläche ein Erscheinungsbild, einschließlich Polsterung, Rahmen und Hover-Effekten.

Mit diesen CSS-Optimierungen werden Ihre Optionsfelder besser ein knopfähnliches Erscheinungsbild, während ihre Funktionalität und Kompatibilität mit älteren Browsern wie IE8 erhalten bleibt.

Das obige ist der detaillierte Inhalt vonWie kann ich Optionsschaltflächen nur mithilfe von CSS wie Schaltflächen aussehen lassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!