Html Jquery Mobile中复选框部分的背景色

试图为我的Jquery移动站点中的复选框部分创建交替背景色，但颜色只是保持白色。。。尝试了几件事，但都没有达到我想要的效果

<fieldset data-role="controlgroup" style="width:90%;">

<div class="OddBox"><input type="checkbox" name="checkbox1" id="checkbox1_0" class="custom" value="" />
<label for="checkbox1_0" style="color:rgba(4,96,46,1)">Call the Police Immediatly to report the accident and notify them of any medical assistence needed.</label></div>

<input type="checkbox" name="checkbox1" id="checkbox1_1" class="custom" value=""  />
<label for="checkbox1_1" style="color:rgba(4,96,46,1)">Turn on your 4-way flashers to warn other drivers.</label>

<input type="checkbox" name="checkbox1" id="checkbox1_2" class="custom, OddBox" value="" />
<label for="checkbox1_2" style="color:rgba(4,96,46,1)">Do not claim fault or responsibility.</label>

<input type="checkbox" name="checkbox1" id="checkbox1_3" class="custom" value="" />
<label for="checkbox1_3" style="color:rgba(4,96,46,1)">Remain calm and courteous.</label>

我尝试使用div包装器并将样式添加到代码的输入行。当我设置标签的样式时，只需更改文本后面的颜色即可

---

任何帮助都将不胜感激。

首先更改HTML，使您的输入和标签位于同一行。像这样：

<fieldset data-role="controlgroup" style="width:90%;">
    <div class="OddBox">
        <div class="form_row">
            <input type="checkbox" name="checkbox1" id="checkbox1_0" class="custom" value="" />
            <label for="checkbox1_0" style="color:rgba(4,96,46,1)">Call the Police Immediatly to report the accident and notify them of any medical assistence needed.</label>
        </div>
        <div class="form_row">
            <input type="checkbox" name="checkbox1" id="checkbox1_1" class="custom" value="" />
            <label for="checkbox1_1" style="color:rgba(4,96,46,1)">Turn on your 4-way flashers to warn other drivers.</label>
        </div>
        <div class="form_row">
            <input type="checkbox" name="checkbox1" id="checkbox1_2" class="custom, OddBox" value="" />
            <label for="checkbox1_2" style="color:rgba(4,96,46,1)">Do not claim fault or responsibility.</label>
        </div>
        <div class="form_row">
            <input type="checkbox" name="checkbox1" id="checkbox1_3" class="custom" value="" />
            <label for="checkbox1_3" style="color:rgba(4,96,46,1)">Remain calm and courteous.</label>
        </div>
    </div>

---

我忘了：这里有一个供你预览和玩的小游戏：

我认为你做不到这一点

您可以通过移动

背景位置
并隐藏实际复选框来完成此操作

或者使用
：before
和
：after
添加内容和样式以替换复选框参见此示例


<fieldset data-role="controlgroup" style="width:90%;">
    <div class="OddBox">
        <div class="form_row">
            <input type="checkbox" name="checkbox1" id="checkbox1_0" class="custom" value="" />
            <label for="checkbox1_0" style="color:rgba(4,96,46,1)">Call the Police Immediatly to report the accident and notify them of any medical assistence needed.</label>
        </div>
        <div class="form_row">
            <input type="checkbox" name="checkbox1" id="checkbox1_1" class="custom" value="" />
            <label for="checkbox1_1" style="color:rgba(4,96,46,1)">Turn on your 4-way flashers to warn other drivers.</label>
        </div>
        <div class="form_row">
            <input type="checkbox" name="checkbox1" id="checkbox1_2" class="custom, OddBox" value="" />
            <label for="checkbox1_2" style="color:rgba(4,96,46,1)">Do not claim fault or responsibility.</label>
        </div>
        <div class="form_row">
            <input type="checkbox" name="checkbox1" id="checkbox1_3" class="custom" value="" />
            <label for="checkbox1_3" style="color:rgba(4,96,46,1)">Remain calm and courteous.</label>
        </div>
    </div>

.form_row:nth-child(odd) {
    background-color: rgba(204, 204, 204, 1)
}