Twitter Bootstrap - modification de la hauteur des cases à cocher dans le formulaire

J'ai un formulaire HTML simple qui utilise le Twitter Bootstrap cadre (v3.1.1). Sur le smartphone/iPhone ces cases à cocher sont très petits et difficiles à sélectionner avec votre doigt. Je voudrais leur faire le plus grand/plus espacées de sorte qu'ils sont plus faciles à toucher, mais n'ai pas trouvé un chemin jusqu'à présent - est-ce même possible.

Voici mon formulaire en 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>

J'ai aussi l'installation d'un jsfiddle ici

InformationsquelleAutor user982124 | 2014-05-19
  1. 4

    Ce n'est pas facile de faire de la croix-navigateur .. découvrez l'étude faite ici: http://www.456bereastreet.com/lab/form_controls/checkboxes/

    Aussi, assurez-vous que vous êtes à l'utilisation correcte du code HTML. Vous devez envelopper chacun de vos cases à cocher avec label, comme ceci:

     <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, en d'autres mots... COURIR!
    InformationsquelleAutor rorofromfrance