Question

i have this css code:

input[type=radio] {
  opacity: 0;
  float: left;
  width: 25px;
  margin: 0;
  clear: none;
  padding: 5px 0 4px 24px;
  cursor: pointer;
  background-image: url(../images/off.png) left center no-repeat; 
}

input[type=radio]#male:checked {
  background-image: url(../images/radio-male.png) left center no-repeat; 
}

input[type=radio]#female:checked {
  background-image: url(../images/radio-female.png) left center no-repeat; 
}

and no matter what i do i can’t get the images to show up. I looked in the network tab of developer tools in chrome and it looks as though the images aren’t even being sent to the browser, which is strange cause i’m positive that the url is correct. any tips or hints would be greatly appreciated.

Answer 1

You are using background-image which should only specify the url for the image. If you want to specify positioning/repeat in the same line, change it to just background.

For example:

background: transparent url('../images/radio-female.png') left center no-repeat;

Change transparent if you want a color as well as the image.

It also appears that you cannot style the background of the radio input itself, however you can achieve the same effect by styling the label and then using padding to put the background to the left. See my example here:

http://jsfiddle.net/fqJg7/