CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
nodeffect
nodeffect

Reputation: 1840

CSS style theming for checkboxes

enter image description here

I'm trying to achieve the picture above on the Target Time section....

All I have is as below... But the placement is not right when I resize my browser, and I don't know how to add the peak time picture above the checkboxes. Anyone can help ?

<div class="row-fluid">
    <label style="float:left; margin-right:14px;">Target Time</label>
    <div style="float:left; display:block;">
        <label class="checkbox inline">
            <input type="checkbox" value="7am-11:59am" name="target_time[]" />7am-11:59am</label>
        <label class="checkbox inline">
            <input type="checkbox" value="12pm-5:59pm" name="target_time[]" />12pm-5:59pm</label>
        <label class="checkbox inline">
            <input type="checkbox" value="6pm-9:59pm" name="target_time[]" />6pm-9:59pm</label>
    </div>
    <div style="position:relative; display:block;">
        <div style="float: left; border-right: 1px solid #aaa; height: 5em;"></div>
        <label class="checkbox inline">
            <input type="checkbox" value="10:00pm-2:00am" name="target_time[]" />10:00pm-2:00am</label>
        <label class="checkbox inline">
            <input type="checkbox" value="2:01am-6:59am" name="target_time[]" />2:01am-6:59am</label>
    </div>
</div>

Jsfiddle DEMO: http://jsfiddle.net/a8VpS/1/

Upvotes: 3

Views: 229

Answers (1)

Saurabh
Saurabh

Reputation: 1007

Do you want this kind of structure.if yes then check the following structure for you check boxes

    <div  style="float:left;">
        <img src='http://forums.animesuki.com/images/as.global/icons/icon7.gif'><br>
        <label class="checkbox inline">
            <input type="checkbox" value="7am-11:59am" name="target_time[]"/>7am-11:59am
        </label>
    </div>

Fiddle Demo

Is this what you expect --> Check The updated Fiddle Demo

Upvotes: 2

Related Questions