CODEWITHSUNDEEP
htmlcss
Satch3000
Satch3000

Reputation: 49384

Checkbox with custom image CSS code not working

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>

Upvotes: 1

Views: 9131

Answers (3)

Farzin Zaker
Farzin Zaker

Reputation: 3606

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!

Upvotes: 2

Richard JP Le Guen
Richard JP Le Guen

Reputation: 28753

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:

Upvotes: 2

Version1
Version1

Reputation: 657

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.

Upvotes: 7

Related Questions