Question

I have very little experience with CSS.

I’d like to style the default JQuery Checkboxes to move the checked icon from left to right.

I have used my badass Paint skills to illustrate what I’m looking for.

So I’m not asking for someone else to do the job, just some pointers in the right direction.

What would be the best way to achieve this ?

Thank you !

Answer 1

Try looking at the rendered output after jQuery Mobile parses your code using Firebug.

You will be able to see the structure and classes added to the form element. The class names added by jQuery Mobile are pretty strait-forward to understand.

–UPDATE–

Here is the HTML from firebug for the jQuery Mobile documentation for check-boxes:

<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
        <fieldset data-role="controlgroup" class="ui-corner-all ui-controlgroup ui-controlgroup-vertical"><div class="ui-controlgroup-label" role="heading">Agree to the terms:</div><div class="ui-controlgroup-controls">

            <div class="ui-checkbox"><input type="checkbox" class="custom" id="checkbox-1" name="checkbox-1"><label for="checkbox-1" data-theme="c" class="ui-btn ui-btn-icon-left ui-corner-top ui-corner-bottom ui-controlgroup-last ui-checkbox-on ui-btn-up-c"><span class="ui-btn-inner ui-corner-top ui-corner-bottom ui-controlgroup-last"><span class="ui-btn-text">I agree</span><span class="ui-icon ui-icon-shadow ui-icon-checkbox-on"></span></span></label></div>

        </div></fieldset>
    </div>

Notice the “ui-btn-icon-left” class, I’d play with that, you may not just be able to change it to “ui-btn-icon-right” but you can play with the structure. I’ve done this for other elements however I have not tested with check-boxes.