Styling jQuery mobile Checkboxes

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 !

Solution 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.

Solution 2

jquery-mobile v1.0 has a custom data attribute that you can use to adjust icon positioning. This includes checkboxes, radio buttons, nav bars, and other elements.

Documentation: http://code.jquery.com/mobile/latest/demos/docs/buttons/buttons-icons.html

To create the checkbox you've drawn in your question above, your code would be:

  <input type="checkbox" name="checkbox-name" id="checkbox-id" />
  <label for="checkbox-id" data-iconpos="right">I agree</label>

Notice that data-iconpos is applied to the label. That's because jQuery Mobile styles this element heavily to act as the UI element in the front-end. In other words, with this attribute, you're positioning the checked/unchecked icon to the right side of the label.

Note: If you attempt to workaround this attribute and add class="ui-btn-icon-right" to your elements, jQuery Mobile may drop those classes when the page renders.