CSS - Bilder in einem Formular auswählen

Mit Radiobuttons (nur ein Bild ist auswählbar).

<style>
/* Demo 1 */

div#demo1 input[type="radio"] {
 display: None;
}

div#demo1 input[type="radio"] + label {
 border: Solid 1px #000000;
 width: 150px; /* Breite der Bilder */
 height: 120px; /* Höhe der Bilder */
 display: Inline-Block;
 float: Left;
 margin-right: 15px;
 margin-bottom: 15px;
}

div#demo1 input[type="radio"]:checked + label {
 outline: Dashed 3px #2DBBFF;
}

div#demo1 p {
 clear: Left;
}
</style>

<form>
<div id="demo1">
 <input type="radio" name="option" value="" id="lbl1" checked="checked"> <label for="lbl1"><img src="img1.jpg" alt=""></label>
 <input type="radio" name="option" value="" id="lbl2"> <label for="lbl2"><img src="img2.jpg" alt=""></label>
 <input type="radio" name="option" value="" id="lbl3"> <label for="lbl3"><img src="img3.jpg" alt=""></label>
  <input type="radio" name="option" value="" id="lbl4"> <label for="lbl4"><img src="img4.jpg" alt=""></label>
  <p><input type="reset" value="Zurücksetzen"></p>
 </div>
</form>

Mit Checkboxen

<style>
/* Demo 2 */

div#demo2 input[type="checkbox"] {
 display: None;
}

div#demo2 input[type="checkbox"] + label {
 border: Solid 1px #000000;
 width: 150px; /* Breite der Bilder */
 height: 120px; /* Höhe der Bilder */
 display: Inline-Block;
 float: Left;
 margin-right: 15px;
 margin-bottom: 15px;
}

div#demo2 input[type="checkbox"]:checked + label {
 outline: Solid 5px #2DBBFF;
}

div#demo2 p {
 clear: Left;
}
</style>

<form>
<div id="demo2">
 <input type="checkbox" name="option1" value="" id="lbl5"> <label for="lbl5"><img src="img5.jpg" alt=""></label>
 <input type="checkbox" name="option2" value="" id="lbl6"> <label for="lbl6"><img src="img6.jpg" alt=""></label>
 <input type="checkbox" name="option3" value="" id="lbl7"> <label for="lbl7"><img src="img7.jpg" alt=""></label>
 <input type="checkbox" name="option4" value="" id="lbl8"> <label for="lbl8"><img src="img8.jpg" alt=""></label>
 <p><input type="reset" value="Zurücksetzen"></p>
</div>
</form>

Mit Checkboxen und transparenten Bildern

<style>
/* Demo 3 */

div#demo3 input[type="checkbox"] {
 display: None;
}

div#demo3 input[type="checkbox"] + label {
 border: Solid 1px #000000;
 width: 163px; /* Breite der Bilder */
 height: 27px; /* Höhe der Bilder */
 display: Inline-Block;
 float: Left;
 margin-right: 15px;
 margin-bottom: 15px;
}

div#demo3 input[type="checkbox"]:checked + label {
 background-color: #B7E8FF;
}

div#demo3 p {
 clear: Left;
}
</style>

<form>
<div id="demo3">
 <input type="checkbox" name="option9" value="" id="lbl9"> <label for="lbl9"><img src="img9.gif" alt=""></label>
 <input type="checkbox" name="option10" value="" id="lbl10" checked="checked"> <label for="lbl10"><img src="img10.gif" alt=""></label>
 <input type="checkbox" name="option11" value="" id="lbl11"> <label for="lbl11"><img src="img11.gif" alt=""></label>
 <input type="checkbox" name="option12" value="" id="lbl12"> <label for="lbl12"><img src="img12.gif" alt=""></label>
 <p><input type="reset" value="Zurücksetzen"></p>
</div>
</form>

Eine Art Auswahlliste für Bilder

Ähnlich wie Demo 1, nur das hier die Auswahl in ein DIV gesetzt wurde.

<style>
/* Demo 4 */

div#demo4 {
 width: 180px;
 height: 165px;
 overflow: Auto;
 padding: 10px 0  10px 15px;
 border: Solid 2px #C0C0C0;
 resize: Vertical;
}

div#demo4 input[type="radio"] {
 display: None;
}

div#demo4 input[type="radio"] + label {
 border: Solid 1px #000000;
 width: 150px; /* Breite der Bilder */
 height: 120px; /* Höhe der Bilder */
 display: Inline-Block;
 float: Left;
 margin-right: 15px;
 margin-bottom: 15px;
}

div#demo4 input[type="radio"]:hover + label {
 box-shadow: 0px 0px 0px 10px #DFF4FF;
}

div#demo4 input[type="radio"]:checked + label {
 box-shadow: 0px 0px 0px 10px #AEE4FF;
}
</style>

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<audio> Audio-Datei

CSS - Krieg der Sterne

PHP - Nur Zahlen in Arrays beibehalten

JavaScript - Iframe alle 10 Sekunden neu laden

MySQL - MySQL-Anweisung mit PHP ausgeben

In Kontakt bleiben
Nichts ist wichtiger als der Kontakt zu seinen Besuchern: Nur so können Wünsche, Anregungen und konstruktive Kritik ausgetauscht werden.
Am besten ist es, Sie betreiben ein kleines Forum wo Besucher oder Mitglieder Ihre Wünsche und Anregungen mitteilen können. Oder Sie bauen eine Umfrage in Ihre Homepage ein. Auch über ein Kontaktformular können Sie Kritik und Verbesserungsvorschläge entgegennehmen.