我对 CSS 的经验很少。
我想设置默认JQuery Checkboxes 的样式以将选中的图标从左向右移动。
我用我的坏蛋绘画技巧来说明我在寻找什么。
所以我不是要求其他人来做这项工作，只是在正确的方向上提供一些指示。
实现这一目标的最佳方法是什么？
谢谢！
【问题讨论】：
标签： javascript jquery html css jquery-mobile
jquery-mobile v1.0 有一个自定义数据属性，可用于调整图标位置。这包括复选框、单选按钮、导航栏和其他元素。
文档： http://code.jquery.com/mobile/latest/demos/docs/buttons/buttons-icons.html
要创建您在上面的问题中绘制的复选框，您的代码将是：
<input type="checkbox" name="checkbox-name" id="checkbox-id" />
<label for="checkbox-id" data-iconpos="right">I agree</label>
请注意data-iconpos 应用于label。这是因为 jQuery Mobile 对这个元素进行了大量的样式设置，以充当前端的 UI 元素。换句话说，使用此属性，您将选中/未选中图标定位到 label 的右侧。
注意：如果您尝试解决此属性并将class="ui-btn-icon-right" 添加到您的元素中，jQuery Mobile 可能会在页面呈现时删除这些类。
【讨论】：
在 jQuery Mobile 使用 Firebug 解析您的代码后，尝试查看呈现的输出。
您将能够看到添加到表单元素的结构和类。 jQuery Mobile 添加的类名非常难理解。
--更新--
这里是来自 firebug 的用于复选框的 jQuery Mobile 文档的 HTML：
<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>
注意“ui-btn-icon-left”类，我会使用它，您可能不仅可以将其更改为“ui-btn-icon-right”，而且可以使用该结构。我已经为其他元素完成了此操作，但是我没有使用复选框进行测试。
【讨论】：
现在这是 JQM 的一部分，通过设置 data-iconpos="right" 使用标准 API
详情请见http://demos.jquerymobile.com/1.4.3/checkboxradio-checkbox/#Iconposition
【讨论】：