Checkbox with custom image CSS code not working

Question

I am trying to add a custom image to a checkbox and I'm using this code:

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

input[type=checkbox] + label
   {
       background-image: url("../images/checkbox-bg.png") no-repeat 0 0;
       height: 16px;
       width: 16px;
       display:inline-block;
       padding: 0 0 0 0px;
   }

The path is right but the image is not even showing.

I need the image to appear to the left of the label.

Can anyone see a problem on the code above please?

Thanks

Here is the HTML:

<input type="checkbox" value="1" /><label>The Label</label>

write your HTML code also..where u want image? in place of checkbox or in front of checkbox? — xkeshav
– xkeshav, Commented Apr 18, 2011 at 11:22
The label is still a problem as it's under the image and not on the right of it. — Satch3000
– Satch3000, Commented Apr 18, 2011 at 11:34
is there label anywhere else on html or only with the checkbox — xkeshav
– xkeshav, Commented Apr 18, 2011 at 11:35
How big is the image ../images/checkbox-bg.png? What are its dimensions? — Richard JP Le Guen
– Richard JP Le Guen, Commented Apr 18, 2011 at 11:52

Version1 · Accepted Answer · 2011-04-18 11:24:15Z

7

Try using instead of background-image.

background: url("") no-repeat 0 0;

If that fails add also;

display: block;

and position it absolutely or float it.

answered Apr 18, 2011 at 11:24

Version1

6575 silver badges13 bronze badges

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

Comments

Farzin Zaker · Accepted Answer · 2011-04-18 11:42:39Z

2

when you want to set position and repeat option for background, you should use background instead of background-image. also as I know the background position should appear before repeat option. but I am not sure. try it.

background: url("../images/checkbox-bg.png") top left no-repeat;

and do not forget, if your css selector is in a seperate stylesheet file, image path should be relative to address of your .css file! if you placed your css selector in you html page, image path should be relative to your html file!

answered Apr 18, 2011 at 11:42

Farzin Zaker

3,6043 gold badges27 silver badges35 bronze badges

2 Comments

Satch3000 Over a year ago

I added your Answer and also : width:220px; ... and although it's better, the label still starts under the checkbox image.

Farzin Zaker Over a year ago

why you do not change display:inline-block; to display:inline? or can you upload an image from ?

Richard JP Le Guen · Accepted Answer · 2011-04-18 11:35:43Z

2

You are trying to assign the background shorthand format to the background-image property.

The following...

background-image: url("../images/checkbox-bg.png") no-repeat 0 0;

... should instead be:

background: url("../images/checkbox-bg.png") no-repeat 0 0;

You can also try validating the CSS to see what I mean: http://jigsaw.w3.org/css-validator/

You can read more about the background shorthand property and the background-image property on the w3C:

edited Apr 18, 2011 at 11:35

answered Apr 18, 2011 at 11:27

Richard JP Le Guen

28.8k8 gold badges93 silver badges121 bronze badges

Collectives™ on Stack Overflow

Checkbox with custom image CSS code not working

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related