Twitter Bootstrap - änderung der Höhe der Checkboxen in der form

Habe ich ein einfaches HTML-Formular verwendet, das von Twitter Bootstrap-framework (v3.1.1). Auf dem smartphone/iPhone diese Checkboxen sind Recht klein und schwer zu wählen, mit dem finger. Ich würde gerne machen Sie größer/mehr heraus gesperrt, so sind Sie leichter zu treffen, aber habe noch keinen Weg gefunden, so weit ist das auch möglich.

Hier ist mein Formular html:

<div class="container">

    <div>

        <p>Tick all that apply:</p>

        <form role="form" action="continue.php" method="post">
            <input type="hidden" name="selectionID" value="4567">
            <div class="checkbox">
                <label>
                    <input type="checkbox" name="selection[]" value="Fever/Temperature">Apples<br>
                    <input type="checkbox" name="selection[]" value="Swelling or redness at injection site">Oranges<br>
                    <input type="checkbox" name="selection[]" value="Pain at injection site">Bananas<br>
                    <input type="checkbox" name="selection[]" value="Tired/Fatigued">Pears<br>
                    <input type="checkbox" name="selection[]" value="Irritable">Mangoes<br>
                    <input type="checkbox" name="selection[]" value="Sleep pattern change">Watermelon<br>
                    <input type="checkbox" name="selection[]" value="Other">Other<br>

                </label>
            </div>

            <button type="submit" class="btn btn-primary">Next</button>
        </form>
    </div>

</div>

Habe ich auch das setup ein jsfiddle hier

InformationsquelleAutor user982124 | 2014-05-19
  1. 4

    Dies ist nicht einfach zu tun, cross-Browser - .. schauen Sie sich die Studie hier: http://www.456bereastreet.com/lab/form_controls/checkboxes/

    Also, stellen Sie sicher, dass Sie unter Verwendung der korrekten HTML-code. Sollten Sie wickeln Sie jeden Ihrer Checkboxen mit label wie diese:

     <div class="checkbox">
     <label>
         <input type="checkbox" name="selection[]" value="Fever/Temperature" />Apples<br/>
     </label>
     <label>
         <input type="checkbox" name="selection[]" value="Swelling or redness at injection site" />Oranges<br/>
     </label>
     <label>
         <input type="checkbox" name="selection[]" value="Pain at injection site" />Bananas<br/>
     </label>
     <!-- etc. -->
</div>
    • wow, also... LAUFEN!
    InformationsquelleAutor rorofromfrance
Schreibe einen Kommentar