html - Jquery Mobile 中复选框部分的背景颜色

Question

尝试为我的 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>

还有我的CSS

.OddBox{
    background-color: rgba(204,204,204,1);
}

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

如有任何帮助，我们将不胜感激。

Answer 1

首先更改您的 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>

现在您可以根据需要简单地定位那个div。在您的情况下，是这样的:

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

我忘了:这是一个 fiddle供您预览和玩耍: