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.

<video> Video-Datei

CSS - Container vertikal drehen

PHP - Zufälliges Wort ausgeben und Konsonanten zählen

JavaScript - Nachfragen bevor die Seite verlassen wird

MySQL - Datensatz Wert erhöhen