Rahmenbedingungen
zusätzliche Techniken:Javascript, PHP, CSS
Browser & Betriebssystem:Firefox, Windows 7
Editor: Eclipse
Problembeschreibung
Ich habe auf einem Formular einige Checkboxen mit normaler Funktion. Desweiteren eine variable Anzahl Checkboxen welche neben der normalen Funktion auch eine Doppelklick Funktion haben (Doppelklick wählt alle Checkboxen mit gleichem Ziel aus). Nun möche ich den Style aller Checkboxen dahingehend ändern das kein Haken gesetzt wird sondern die Checkbox blau gefüllt wird mit weißem Rand. Dies habe ich bereits auf verschiedene Arten geschafft, aber dann funktioniert die Doppelklick Funktion nicht mehr.
Code:
Beispiel meiner Lösung zur Style Veränderung
CSS
/*entfernen des Standart-Styles */ input[type='checkbox']:checked, input[type='checkbox']:not(:checked) { background: transparent; position: relative; opacity:0; margin:0; padding:0; }/* einfügen des neuen Styles */ input[type='checkbox']:checked + label::before, input[type='checkbox']:not(:checked) + label::before { content:' '; display:inline-block; width: 15px; height:15px; position: relative; top:4px; border: 1px solid #bbb; background: white; margin-right: .15em; box-shadow: inset 0 1px 1px 0 rgba(0,0,0,.1); } input[type='checkbox']:checked + label::before { background:blue; box-shadow: inset 0 0 0 1px white; }