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: Dashed 3px #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>

Bausteine

Eine zufällige Auswahl von „Bausteinen” aus den Bereichen CSS, PHP, JavaScript und MySQL.

CSS - Wasserzeicheneffekt - Hintergrundbild fixieren

PHP - CSRF-Token für Formulare erstellen

JavaScript - Geladenes Stylesheet austauschen

MySQL - Den nächsten und vorherigen Datensatz ermitteln