css - replacing checkbox image

Question

Hi I know this has been answered but I can't get it to work for me.

I have as HTML

<input type="hidden" name="data[Child][remember_me]" id="am_2_" value="0"/>
<input type="checkbox" name="data[Child][remember_me]"  class="checkboxLabel main_street_input" id="am_2" value="1"/>
<label for="am_2">&nbsp; &nbsp;&nbsp;</label>

and then

.amPmCheckbox input[type="checkbox"]{
display: none;}     

.amPmCheckbox input[type="checkbox"]+label{
background: url('http://renegadeox.com/img/off.png') no-repeat; width:16px; height:17px;}

.amPmCheckbox input[type="checkbox"]:checked + label {
background: url('http://renegadeox.com/img/on.png');width:16px; height:17px;}

But it's not picking up the checked image. I can't figure out what's the problem, anyone any ideas? heres a fiddle btw

http://jsfiddle.net/ksCk8/

how can they check a checkbox that isn't displayed?

Goose
– Goose

2014-01-03 17:42:35 +00:00
Commented Jan 3, 2014 at 17:42 — Goose
– Goose, Commented Jan 3, 2014 at 17:42

epascarello · Accepted Answer · 2014-01-03 17:45:07Z

13

It picks up the checked image when the checkbox is checked. Issue you have is the fact nothing is clickable to make the checkbox checked.

Move the AM/PM into the label and use padding to shove it over instead of the spaces.

HTML:

<div class="amPmCheckbox">
    <input type="checkbox" name="data[Child][remember_me]" class="checkboxLabel main_street_input" id="am_2" value="1" />
    <label for="am_2">AM</label>
</div>

CSS:

.amPmCheckbox input[type="checkbox"] {
    display: none;
}
.amPmCheckbox input[type="checkbox"]+label {    
    background: url('http://renegadeox.com/img/off.png') no-repeat;
    height:17px;
    padding-left: 18px;
}
.amPmCheckbox input[type="checkbox"]:checked + label {
    background: url('http://renegadeox.com/img/on.png')  no-repeat;
    height:17px;
}

http://jsfiddle.net/JkDhN/1/

answered Jan 3, 2014 at 17:45

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Babak Over a year ago

what if to show label before the check-box? (in RTL)

epascarello Over a year ago

Why would it matter since checkbox is hidden from view? Can't you make it render in LTR?

Babak Over a year ago

Funny, but I cannot show the image on right side of its label.

epascarello Over a year ago

Ah, now I understand what you are talking about, my morning coffee just kicked in :) Did you try setting the background position and change the padding to be right instead of left. ...png') no-repeat right center;

boatcoder Over a year ago

Fiddle no longer works because of resources that are no longer available.

|

Collectives™ on Stack Overflow

css - replacing checkbox image

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related