DIV Hintergrund in Farbe wenn INPUT checked

[Michael]

Ich versuche gerade ein DIV einzufärben, wenn das Input mit CHECKED ausgewählt ist.

input:checked { outline: 3px solid #ff0000; }

Jetzt habe ich zwar einen roten Rahmen um mein CHECK Box, aber ich will eigentlich das das ganze div eingefärbt wird.

<div class="box">
<input type="checkbox" name ="inhalt" value="1001"  checked >
<span>Nachname</span>
</div>

Kann mir da jemand weiterhelfen?

Michael

[Gunnar Bittersmann]

@@Michael

Ich versuche gerade ein DIV einzufärben, wenn das Input mit CHECKED ausgewählt ist.

<div class="box">
<input type="checkbox" name ="inhalt" value="1001"  checked >
<span>Nachname</span>
</div>

Kann mir da jemand weiterhelfen?

Nein. Geht nicht. Du kannst mit Kombinatoren in CSS (gegenwärtig) nur nachfolgende Geschwister oder Nachfahrenelemente erreichen, aber keine Vorfahren. Du hast keine Chance, von dem input hoch zum div zu kommen.

Dem Eingabefeld fehlt übrigens die notwendige Beschriftung.

Vermutlich soll das so sein:

<div class="box">
  <input type="checkbox" id="inhalt" name="inhalt" value="1001" checked>
  <label for="inhalt">Nachname</label>
</div>

LLAP 🖖

[marctrix]

Hej Gunnar,

Ich versuche gerade ein DIV einzufärben, wenn das Input mit CHECKED ausgewählt ist.

Geht nicht. Du kannst mit Kombinatoren in CSS (gegenwärtig) nur nachfolgende Geschwister oder Nachfahrenelemente erreichen, aber keine Vorfahren. Du hast keine Chance, von dem input hoch zum div zu kommen.

Dem Eingabefeld fehlt übrigens die notwendige Beschriftung.

Vermutlich soll das so sein:

<div class="box">
  <input type="checkbox" id="inhalt" name="inhalt" value="1001" checked>
  <label for="inhalt">Nachname</label>
</div>

Wobei sich die Frage stellt, wieso man da eine Checkbox verwendet. Wird damit abgefragt, ob jemand einen Nachnamen hat?!?

Davon abgesehen: wenn da noch mehr Checkboxen sind (man zum Beispiel eine Suche einschränkt nach Nachname, Vorname, Straße usw), gehören die in ein fieldset!

Und noch ein Tipp: das label funktioniert auch ohne sichtbare Checkbox. Das label lässt sich wie ein div beliebig gestalten, so dass du den optischen Effekt, den du über das div realisieren möchtest, problemlos mit dem label hinbekommen kannst - das div kannst du dir - für diesen Anwendungsfall zumindest - also sparen. Dein Code wird also kürzer und damit einfacher.

Marc

[MudGuard]

Hi,

Wobei sich die Frage stellt, wieso man da eine Checkbox verwendet. Wird damit abgefragt, ob jemand einen Nachnamen hat?!?

Wir hatten letztes Jahr einen Kunden, der hat keinen Vornamen.

Haben wir erst nicht glauben wollen, er hat dann seinen Personalausweis gescannt und uns das Bild geschickt - im Feld Vorname waren nur zwei Minuszeichen ...

cu,
Andreas a/k/a MudGuard

[pl]

Hi,

Wobei sich die Frage stellt, wieso man da eine Checkbox verwendet. Wird damit abgefragt, ob jemand einen Nachnamen hat?!?

Wir hatten letztes Jahr einen Kunden, der hat keinen Vornamen.

Haben wir erst nicht glauben wollen, er hat dann seinen Personalausweis gescannt und uns das Bild geschickt - im Feld Vorname waren nur zwei Minuszeichen ...

Also doch ein Name ;)

Ich mein ja nur, wenn ein Hund plusminus heißt, dann ist doch der Name minusminus fürs Herrchen legitim....

[Der Martin]

Hallo,

Wobei sich die Frage stellt, wieso man da eine Checkbox verwendet. Wird damit abgefragt, ob jemand einen Nachnamen hat?!?

Wir hatten letztes Jahr einen Kunden, der hat keinen Vornamen.

war das womöglich jemand, der aus einem ganz anderen Kulturkreis stammte, wo unser vertrautes Konzept mit Vor- und Nachnamen so nicht angewendet wird?

Wir wissen ja schon, dass in einigen asiatischen Sprachen der Familienname (wenn man ihn so nennen mag) vorangestellt wird - der scheidende UN-Generalsekretär Ban Ki Moon ist in der förmlichen Anrede eben nicht Mr. Moon, sondern Mr. Ban. Nicht zu verwechseln mit Mr. Bean. ;-)

Und in Island sind Namensverzeichnisse generell nach Vornamen sortiert; auch dort gibt es keine Nachnamen im Sinne von Familiennamen wie bei uns. Wenn der Ragnar aus Akureyri einen Sohn bekommt, nennt er den vielleicht Bjarni - und dann heißt der Bursche mit vollem Namen Bjarni Ragnarsson.

Und ebenso kann ich mir vorstellen, dass es Länder und Völker gibt, bei denen Namen aus nur einem Bestandteil üblich sind. Da ist es natürlich schwierig mit der Integration, wenn deutsche Behörden plötzlich zwingend einen Vor- und einen Nachnamen in sämtlichen Formularen verlangen.

Haben wir erst nicht glauben wollen, er hat dann seinen Personalausweis gescannt und uns das Bild geschickt - im Feld Vorname waren nur zwei Minuszeichen ...

Tricky. Wie macht man am besten kenntlich, dass dieses Feld eigentlich leer sein müsste, obwohl das aus formalen Gründen nicht sein darf? ;-)

So long,
 Martin

[Gunnar Bittersmann]

@@Der Martin

Tricky. Wie macht man am besten kenntlich, dass dieses Feld eigentlich leer sein müsste, obwohl das aus formalen Gründen nicht sein darf? ;-)

Falsche Frage.

LLAP 🖖

[Der Martin]

Hallo,

Tricky. Wie macht man am besten kenntlich, dass dieses Feld eigentlich leer sein müsste, obwohl das aus formalen Gründen nicht sein darf? ;-)

Falsche Frage.

ich finde sie durchaus richtig - im Hinblick auf den Spagat zwischen einem existierenden Namen und Formvorschriften, die dazu nicht passen.

Welche "richtige" Frage hättest du denn stattdessen gestellt?

Ciao,
 Martin

[Gunnar Bittersmann]

@@Der Martin

Tricky. Wie macht man am besten kenntlich, dass dieses Feld eigentlich leer sein müsste, obwohl das aus formalen Gründen nicht sein darf? ;-)

Falsche Frage.

Welche "richtige" Frage hättest du denn stattdessen gestellt?

Wie schafft man die formalen Gründe ab?

LLAP 🖖

[Der Martin]

Hallo,

Tricky. Wie macht man am besten kenntlich, dass dieses Feld eigentlich leer sein müsste, obwohl das aus formalen Gründen nicht sein darf? ;-)

Falsche Frage.

Welche "richtige" Frage hättest du denn stattdessen gestellt?

Wie schafft man die formalen Gründe ab?

ich gebe zwei Punkte für Idealismus und einen für Stil. Gute Frage - in der Theorie.

In der Praxis halte ich sie aber für so realitätsfern, dass mir diese Frage nicht eingefallen wäre. Da war doch erst neulich mal was ...
Ich bin mir eigentlich ziemlich sicher, wenn es um behördlichen Starrsinn geht, um die Vehemenz, eine Formvorschrift durchzusetzen, und sei sie noch so sinnlos, dann sind sich die Schweizer und die Deutschen durchaus ebenbürtig. Und auch in diesem Beispiel ginge es ja um eine Änderung, die einen gigantischen Rattenschwanz nach sich zieht.

Ciao,
 Martin

[MrMurphy1]

Hallo

Ohne genaue Angaben werden wir dir kaum helfen können.

Am wichtigsten: Worum geht es überhaupt?

Soll das div zur besseren Übersicht bei checked gefärbt werden?

Soll in das div noch weiterer Text?

Warum verwendest du kein label-Element?

Soll das ganze im Endeffekt für ein komplettes Formular gelten, bei dem dann alle checked-Einträge mit einer Hintergrundfarbe angezeigt werden?

Darf der Quelltext angepasst werden?

Gibt es weitere Vorgaben, die nicht geändert werden können?

Ich sehe einige Möglichkeiten mit dem sogenannten "Checkbox-Hack". Danach kannst du ja mal suchen.

Im Moment schwebt mir vor den Checkbox-Hack mit einem eigenen Icon für das Kästchen und position zu verwenden. Ob das realistisch ist hängt von deinen Vorgaben ab.

Geht es nur darum checked-Texte mit einer Hintergrundfarbe zu kennzeichnen ist die Lösung mit dem div unnötig. Dann sollte direkt das label-element gekennzeichnet werden.

Gruss

MrMurphy

[Rolf b]

Hier steht was dazu.