CSS-Klicks auf das Radio wechseln zwischen zwei Bildstilen und nur eines der mehreren Radios kann aktiviert werden

Wir implementieren einen roten Bildstil für die angeklickte Schaltfläche und einen grauen Bildstil für die anderen nicht ausgewählten Schaltflächen. Siehe den folgenden Bildstil:

1. Als erstes erstelle ich hier zwei Radios: (Du kannst auch mehr deklarieren, die Daten werden hier normalerweise dynamisch bezogen)

<input Typ="Radio" Name="Standardadresse" Klasse="address_manager_content-d3-left-img" />
<input Typ="Radio" Name="Standardadresse" Klasse="address_manager_content-d3-left-img" />

2. Dem Radio Stil hinzufügen: CSS-Code:

.address_manager_content-d3-left-img{
 /* Den ursprünglichen Stil ausblenden */
 Aussehen: keines;
 -webkit-auftritt: keines;
 Gliederung: keine;
 /* Neuen Stil hinzufügen: wenn nicht ausgewählt*/
 Anzeige: Inline-Block;
 Breite: 20px;
 Höhe: 20px;
 Position: statisch;
 Rand: 15px 5px 0 0!wichtig;
 Hintergrund: URL (/public/app/gzh/images/address_manager_wxz.png) keine Wiederholung;
 Hintergrundgröße: Abdeckung;
}
.address_manager_content-d3-left-img:checked{/* Wenn ausgewählt*/
   Hintergrund: URL (/public/app/gzh/images/address_manager_xz.png) keine Wiederholung;
   Hintergrundgröße: Abdeckung;
}

3. Beschreibung: (Es gibt mehrere Schlüsselstile, andere Stile können Sie selbst anpassen)

1) Verstecke den Originalstil. 2) Ersetze den Originalstil durch das Bild mithilfe des URL-Attributs. 3) Info! Wichtige Verwendung: In meinem Artikel wird 4) background-size: cover-Attribut erläutert: Vergrößern Sie das Hintergrundbild auf eine Größe, die in den Elementcontainer passt. Die Bildproportionen bleiben unverändert, aber beachten Sie, dass der Teil, der über den Container hinausgeht, möglicherweise abgeschnitten wird. (Ähnlich wie Hintergrundgröße: 100 % 100 %) 5) Element auswählen: aktiviert, um den ausgewählten Stil festzulegen.

4. Nachdem Sie die obigen Schritte abgeschlossen haben, können Sie auf das Radio klicken, um den Bildstil zu ändern. Dies ist Teil der Adressverwaltung. Klicken Sie auf Zurück, um die Adressverwaltung mit Vue.js zu implementieren.

Zusammenfassen

Oben ist das CSS, das ich Ihnen vorgestellt habe. Klicken Sie auf das Radio, um zwischen zwei Bildstilen zu wechseln. Es kann nur eines der mehreren Radios aktiviert werden. Ich hoffe, es wird Ihnen helfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken! Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank!