使用CSS更改JQuery Mobile中复选框的宽度？

Question

I'm trying to set the width of my 3 checkboxes to be 33% each, but no matter what I do I'm not able to change the width at all.

The form/fieldset portion of my HTML looks like this:

<form class="form_attendance">
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" id="form_attendance">
    <legend>Attendance</legend>
    <input type="checkbox" name="checkbox1" id="checkbox1" class="selector">
    <label for="checkbox1">1</label>
    <input type="checkbox" name="checkbox2" id="checkbox2" class="selector">
    <label for="checkbox2">2</label>
    <input type="checkbox" name="checkbox3" id="checkbox3" class="selector">
    <label for="checkbox3">3</label>
</fieldset>
</form>

I've tried setting different widths to the input- form- and fieldset-components in CSS using both class and id but nothing happens.

Does anyone have any idea?

Answer 1

jQuery Mobile adds extra classes and html elements to your code. You need to target those. Best is if you use your browser inspector to check which elements you need to target.

In you case you need this CSS:

#form_attendance .ui-controlgroup-controls {
    width: 100%
}

#form_attendance .ui-checkbox {
    width: 33%;
}

Working Fiddle