Wie kann ich eine Kontrollkästchenalternative erstellen, die Bilder verwendet und das Bild beim Klicken verkleinert und ein Kontrollkästchen überlagert?

Bilder wie Kontrollkästchen verwenden

Problem

Erstellen Sie eine Alternative zu Standard-Kontrollkästchen, bei der Benutzer auf Bilder klicken, um das Bild zu verkleinern und ein Kontrollkästchen einzublenden.

Lösung

Reines semantisches HTML/CSS Lösung

Diese Lösung macht vorgefertigte Lösungen überflüssig und verbessert das Verständnis von CSS-Techniken.

Schritte:

1. Weisen Sie Kontrollkästchen eindeutige IDs zu und verknüpfen Sie sie mithilfe des for-Attributs der Beschriftung mit Beschriftungen.
2. Kontrollkästchen mithilfe von CSS ausblenden (z. B. display: none;).

3. Verwenden Sie das Pseudoelement label::before als visuellen Ersatz für Kontrollkästchen:

   • Legen Sie ein anfängliches Hintergrundbild für die deaktivierten Kontrollkästchen fest Zustand.

4. Verwenden Sie den Pseudoselektor :checked, um das Bild zu ändern, wenn Das Kontrollkästchen ist aktiviert:

   • Wenden Sie ein Hintergrundbild für den aktivierten Status an.
   • Verwenden Sie die Geschwisterauswahl ( ), um nur Beschriftungen neben Kontrollkästchen auszuwählen.
5. Gestalten Sie das Etikett mit der richtigen Positionierung, Anzeige, Breite und Höhe.

Bearbeiten

Reines CSS-Kontrollkästchen-Ersetzen

Diese Änderung stellt eine rein CSS-gesteuerte Lösung ohne die Verwendung von Bildern dar:

• Erstellen Sie ein ::before-Element auf dem Etikett mit Inhalt " ✓ ".
• Wenden Sie abgerundete Ränder und Übergänge an, um das visuelle Erscheinungsbild zu verbessern.

Implementierung

Ein Codepen-Beispiel demonstriert diese Technik in Aktion:

http://codepen.io/anon/pen/wadwpx

Code Snippet

/* Style the labels and images */
label {
  border: 1px solid #fff;
  padding: 10px;
  display: block;
  position: relative;
  margin: 10px;
  cursor: pointer;
  /* disable text selection */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

label::before {
  background-color: white;
  color: white;
  content: " ";
  display: block;
  border-radius: 50%;
  border: 1px solid grey;
  position: absolute;
  top: -5px;
  left: -5px;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 28px;
  transition-duration: 0.4s;
  transform: scale(0);
}

label img {
  height: 100px;
  width: 100px;
  transition-duration: 0.2s;
  transform-origin: 50% 50%;
}

/* Style the checked state */
:checked + label {
  border-color: #ddd;
}

:checked + label::before {
  content: "✓";
  background-color: grey;
  transform: scale(1);
}

:checked + label img {
  transform: scale(0.9);
  box-shadow: 0 0 5px #333;
  z-index: -1;
}

/* Style the unordered list that contains the checkboxes */
ul {
  list-style-type: none;
}

/* Style the individual list items */
li {
  display: inline-block;
}

<ul>
  <li><input type="checkbox">

Das obige ist der detaillierte Inhalt vonWie kann ich eine Kontrollkästchenalternative erstellen, die Bilder verwendet und das Bild beim Klicken verkleinert und ein Kontrollkästchen überlagert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!