Wie kann ich Optionsfelder nur mithilfe von CSS so gestalten, dass sie wie Schaltflächen aussehen?

Ersetzen von Optionsfeldern durch schaltflächenähnliche Elemente

Optionsfelder werden häufig in Formularen zur Benutzerauswahl verwendet. Allerdings kann die Benutzeroberfläche dadurch verbessert werden, dass ihr Erscheinungsbild so angepasst wird, dass es normale Schaltflächen nachahmt.

Verwenden von CSS zum Transformieren von Optionsfeldern

Sie können diese Transformation ausschließlich mit CSS erreichen, wodurch das eliminiert wird Bedarf an externen Rahmenbedingungen. Die aktualisierte HTML-Struktur bleibt unverändert und behält ihre Funktionalität bei.

HTML-Markup

Der HTML-Code für das Spendenformular bleibt derselbe und besteht aus:

• A
  Liste für Optionsfeldoptionen
  • Elemente, die Optionsfelder und ihre Beschriftungen enthalten

  CSS-Styling

  Der folgende CSS-Code wandelt Optionsfelder in schaltflächenähnliche Elemente um:

  .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;
  }
  
  .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;
  }

  So funktioniert es

  • Es positioniert sowohl das Optionsfeld als auch die Beschriftungselemente absolut innerhalb der
  • Elemente.
  • Die Deckkraft des Optionsfelds ist auf 0,01 eingestellt, wodurch es optisch ausgeblendet wird.
  • Wenn ein Optionsfeld aktiviert ist, wird seine verknüpfte Beschriftung mit einem gelben Hintergrund hervorgehoben.
  • Der Hover-Effekt auf Etiketten bleibt erhalten.

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