Checkbox selbst getalten

[Linuchs]

Hallo,

die Standard-Checkboxen lassen sich - zumindest im Firefox - nicht in der Größe verändern. Selbst dann, wenn man per [Strg][+] Texte und Bilder vergrößert, bleiben Checkboxen unverändert kümmerlich.

Auf dieser Seite habe ich eine interessante Checkbox entdeckt, die auch funktioniert, wenn Javascript ausgeschaltet ist.

<div class="form-item form-type-checkbox form-item-updates-opt-in-td">
 <label class="form-label label-checkbox" for="edit-updates-opt-in-td"> <input type="checkbox" id="edit-updates-opt-in-td" name="updates_opt_in_td" value="Tesla Newsletter" checked="checked" class="checkbox" /><i class="icon-checkbox"></i>
Get Tesla Updates via email </label>
</div>

Mir ist nur nicht klar, wie die funktioniert, weil eine unübersichtlich große Zahl an CSS Dateien eingebunden ist.

Auch das Betrachten mit "Element untersuchen" entzieht sich einer Analyse, weil unüberschaubar groß mit vielen unbeteiligten Tags und Streichungen.

Kann man das mit übersichtlich vielen Zeilen CSS hinbekommen?

Linuchs

[Performer]

Hi Linuchs,

Auch das Betrachten mit "Element untersuchen" entzieht sich einer Analyse, weil unüberschaubar groß mit vielen unbeteiligten Tags und Streichungen.

nach dem Löschen vieler Zeilen CSS sind bei mir übrig geblieben:

.checkbox:checked + .icon-checkbox:before {
    opacity: 1;
}

.icon-checkbox:before {
    top: -1px;
    left: 3px;
    width: 27px;
    height: 18px;
    background: url(/sites/all/themes/custom/tesla_theme/assets/img/icon-checkmark.svg) no-repeat 0 0;
}

.icon-checkbox:before {
    content: " ";
    position: absolute;
}

Ciao, Performer

[Linuchs]

Moin Performer,

habe die Grafik (den Haken) runtergeladen und in ein vorhandenes Formular diese Zeilen eingefügt:

<style>
.checkbox:checked + .icon-checkbox:before {
  opacity: 1;
}
.icon-checkbox:before {
  top: -1px;
  left: 3px;
  width: 27px;
  height: 18px;
  background: url(icon-checkmark.svg) no-repeat 0 0;
}
.icon-checkbox:before {
  content: " ";
  position: absolute;
}
</style>
<div class="form-item form-type-checkbox form-item-updates-opt-in-td">
 <label class="form-label label-checkbox" for="edit-updates-opt-in-td"> <input type="checkbox" id="edit-updates-opt-in-td" name="updates_opt_in_td" value="Tesla Newsletter" checked="checked" class="checkbox" /><i class="icon-checkbox"></i>
Test Checkbox </label>
</div>

Ich sehe nur die Standard-Checkbox. Irgendwas muss noch fehlen.

Linuchs

[dedlfix]

Tach!

Auf dieser Seite habe ich eine interessante Checkbox entdeckt, die auch funktioniert, wenn Javascript ausgeschaltet ist.

 <label for="edit-updates-opt-in-td"> <input type="checkbox" id="edit-updates-opt-in-td" name="updates_opt_in_td" checked="checked" /><i class="icon-checkbox"></i>
Get Tesla Updates via email </label>
</div>

Mir ist nur nicht klar, wie die funktioniert, weil eine unübersichtlich große Zahl an CSS Dateien eingebunden ist.

Zusammengekürzt auf das Wesentliche ergibt sich ein Label, das man gestalten kann, so dass sich die äußere Form ergibt. Ein Klick auf ein Label mit for-Attribut schaltet eine Checkbox mit gleichnamigem id um. Das Zeichen in der Box wird anscheinend über das i-Element eingefügt und je nach Schaltzustand der Checkbox ein-/ausgeblendet/umgeschaltet. Dafür wird wohl ein Icon-Font-Zeichen genommen worden sein.

dedlfix.

[Christian Kruse]

Hallo dedlfix,

Ein Klick auf ein Label mit for-Attribut schaltet eine Checkbox mit gleichnamigem id um.

Ergänzung: wenn das input im label ist, dann ist das for-Attribut nicht notwendig.

LG,
CK

[Matthias Apsel]

Hallo Christian Kruse,

Ein Klick auf ein Label mit for-Attribut schaltet eine Checkbox mit gleichnamigem id um.

Ergänzung: wenn das input im label ist, dann ist das for-Attribut nicht notwendig.

Jein, die implizite Zuordnung der Beschriftung ohne for-Attribut bereitet den Screenreadern wohl immer noch Schwierigkeiten. Siehe barrierefreies Webdesign

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Ergänzung: wenn das input im label ist, dann ist das for-Attribut nicht notwendig.

Jein, die implizite Zuordnung der Beschriftung ohne for-Attribut bereitet den Screenreadern wohl immer noch Schwierigkeiten.

Nein, tut sie nicht.

Hab heute jemanden gefragt, der sich damit auskennt. Tomas sagt, dass AT sich schon an die (ewig alte) HTML-Spec hält. Und falls irgendein Screenreader X doch nicht, dann ist das ein Bug von Screenreader X und muss dort gefixt werden.

LLAP

PS: 2 Tage eher und ich hätte auch Léonie Watson persönlich fragen können.

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Ergänzung: wenn das input im label ist, dann ist das for-Attribut nicht notwendig.

Jein, die implizite Zuordnung der Beschriftung ohne for-Attribut bereitet den Screenreadern wohl immer noch Schwierigkeiten.

Nein, tut sie nicht.

Hab heute jemanden gefragt, der sich damit auskennt. Tomas sagt, dass AT sich schon an die (ewig alte) HTML-Spec hält. Und falls irgendein Screenreader X doch nicht, dann ist das ein Bug von Screenreader X und muss dort gefixt werden.

Danke. Gut zu wissen.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Christian Kruse

Ergänzung: wenn das input im label ist, dann ist das for-Attribut nicht notwendig.

Ergänzung: Dass das hier überhaupt nicht zu gebrauchen ist (noch nicht), hatten wir kürzlich.

Und semantisch sinnvoll ist das auch nicht.

LLAP

[Christian Kruse]

Hallo Gunnar,

Und semantisch sinnvoll ist das auch nicht.

Das war auch immer meine Argumentation. Die hat aber nie breiten Anklang gefunden, im Gegenteil: ich sehe das immer öfter, dass man die input in label schachtelt.

LG,
CK

[MrMurphy1]

Hallo

Kann man das mit übersichtlich vielen Zeilen CSS hinbekommen?

Ich denke schon. Google hat mir folgende Beispiele geliefert:

http://codepen.io/maddesigns/pen/jbiDn/

und

http://jsfiddle.net/3P4sG/

Gruss

MrMurphy

[Gunnar Bittersmann]

@@Linuchs

die Standard-Checkboxen lassen sich - zumindest im Firefox - nicht in der Größe verändern. […] Auf dieser Seite […] Mir ist nur nicht klar, wie die funktioniert […]

Das hab ich doch neulich erst irgendwem erklärt. Ach so, du warst das.

LLAP