CODEWITHSUNDEEP
htmlcssbackground
Chris Wronski
Chris Wronski

Reputation: 1

Background color of check box sections in Jquery Mobile

Trying to create alternating background colors for my check box sections in my Jquery mobile site but the colors are just staying white... Tried a couple things and none worked the way I wanted.

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

And my css

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

I tried using a div wrapper and adding the style right to the input line of code. When I style the label it ands up just changing the color behind the text.

Any help would be greatly appreciated.

Upvotes: 0

Views: 761

Answers (2)

Devin
Devin

Reputation: 7720

First change your HTML so your input and labels are in the same row. Like this:

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

Now you can simply target that div as you want. In your case, something like this:

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

I forgot: here's a fiddle for you to preview and play around:

Upvotes: 1

vico
vico

Reputation: 2142

I don't think you can do this..

you did prob do this with shifting background position and hiding the actual check box

or use the :before and :after to add contents and style to replace the check box see this for example

http://cssdeck.com/labs/css-checkbox-styles

Upvotes: 0

Related Questions