CODEWITHSUNDEEP
htmlcsscheckbox
user2336624
user2336624

Reputation: 47

Duplicate checkbox when styling with CSS

I am trying to style my checkbox with my own images, i have it working however, the original checkbox is still visible. So the standard check box is there alongside the custom Checkbox, and the are linked together.

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>

CSS

 /*CHECBOX STYLING*/


 .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;
 }

Here is the working example.

http://jsfiddle.net/EUkK4/

Upvotes: 0

Views: 958

Answers (3)

80PoundsOfFury
80PoundsOfFury

Reputation: 264

you've got a space that between input and [type="checkbox"]... that's why the checkbox is still showing. remove it and you're golden

Upvotes: 1

Anonymous
Anonymous

Reputation: 12027

The problem is that you are separating input[type=checkbox] in order to make it input [type=checkbox]. CSS interprets this as any [type=checkbox] within any <input> that is within .amPmCheckbox.

New Fiddle: http://jsfiddle.net/EUkK4/1/

Upvotes: 0

Joel
Joel

Reputation: 2257

You had an extra space in your css class "input [", removing the space works. Also, beware of using display: none on your element to hide it. Some browser won't changed the checked state of the input element if it's hidden that way. instead, use the following to hide it while maintaining the change events in all browsers.

.amPmCheckbox input[type="checkbox"] {
    position: absolute;
    clip: rect(1px,1px,1px,1px);
}

Upvotes: 2

Related Questions