Checkbox für responsive design optimieren

[burn4ever]

Hallo,
ich arbeite gerade an einem responsive Template und habe u.A. eine Formularstrecke welche auch checkboxen beinhaltet.
Allerdings sind die Checkboxen mit dem Finger auf dem Smartphonedisplay schwer zu treffen.

Jemand einen Tipp für mich wie ich die Benutzbarkeit verbessern kann?

Es gibt ja die Möglichkeit mittels <label> mit dem Text die checkbox zu aktivieren/deaktivieren. Das möchte ich aber nicht. Ich möchte nur den klickbaren Bereih um die checkbox um 10 bis 20px erweitern.

 

[Cheffchen]

also wenn das unbedingt anders machen möchtest dann mach es großer mit margin.

cheffchen

 

[scbawik]

... dann mach es großer mit Martin.

Aha, so ist das ?!

 

[Cheffchen]

der Martin kann das bestimmt auch, blöde texterkennung :O)
Magin habe ich natürlich gemeint.

Cheffchen

 

[burn4ever]

hmmm, seid Ihr Euch da sicher?
Wenn ich das margin z.B. auf:

input[type="checkbox"] {
margin:25px;
}

setze, tut sich nichts. Sprich der klickbare Bereich wird einfach nicht größer.

 

[Banana_Jones]

margin wird nicht funktionieren, weil margin ja auch nicht zum Element selbst gehört sondern den Außenabstand definiert.

Was spricht denn gegen <label>? Tipp: Du musst gar keinen Text verwenden, du kannst auch die Checkbox selbst in das entsprechende <label> packen und dementsprechend formatieren...

 

[Cheffchen]

Hallo,

ja stimmt. ich hatte das getestet und da war ein label um die checkbox.
Stimmt macht kein sinn auf label zu verzichten, kennen alle browser und selbst wenn man das dynamisch erstelt kann man ja das label auch drum rum machen lassen.

Cheffchen

 

[Tronjer]

Fallen mir zwei Ansätze zu ein:

- CSS: die Checkbox per transform: scale vergrößern.
- JavaScript: Die Checkbox in ein größeres Element mit Clickhandler einbetten, der check / uncheck übernimmt.

Also bissi HTML:

<div class="container" style="width:100px;height:100px;border:1px red solid;">
    <input style="margin-top:40px;" type="checkbox" id="check"><label for="check">Foobar</label>
</div>

und etwas jQuery:

$('.container').on('click', function() {
    var box = $(this).find(':checkbox');
    var value = box.is(':checked') ? false : true;
    box.prop('checked', value);
});