CODEWITHSUNDEEP
htmlcssimageurlradio-button
Joe
Joe

Reputation: 1354

css background image for radio button not showing up

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.

Upvotes: 2

Views: 6829

Answers (5)

John Lawrence
John Lawrence

Reputation: 2923

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/

Upvotes: 3

John
John

Reputation: 7910

I'd sugest you to use ready jQuery Plugin to do that. In my vision this will be better and more elegant way to do that. It will be also easier for you.

For example you can use : http://uniformjs.com/.

About : Uniform

"Have you ever wished you could style checkboxes, drop down menus, radio buttons, and file upload inputs? Ever wished you could control the look and feel of your form elements between all browsers? If so, Uniform is your new best friend. Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility."

There are a lot of plugins, and you can get exactly what you want.

I hope It helps.

Regards,

John.

Upvotes: 2

thebiffboff
thebiffboff

Reputation: 958

This is because the opacity is set to 0. I presume you are doing this because you want a custom skinned radio button, so you are using opacity to hide the native control, hoping that the background image changes when the state changes. To achieve what you want, you will need to put the background image on a containing image and update the background with javascript hooked into change or click events on the radio button. Or hiding the native control altogether and manipulating it with javascript.

I would recommend using a plugin such as this that will do all the hard work for you, leaving you to change the css as you wish: http://code.google.com/p/jquery-checkbox/

One other note, if your method did work, I would recommend using css sprites to change the background position of the image rather than changing the source image itself as there will be a noticeable delay/flicker while the new image is downloaded. http://css-tricks.com/css-sprites/

Upvotes: 1

Liam
Liam

Reputation: 29760

I'm pretty sure this isn't supported on most browsers. You will need to create a custom method of rendering this, I've seen some people who hide the checkbox and then add a image to hold the checked image and then change the checkbox,

something like this: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

Upvotes: 0

Charles
Charles

Reputation: 648

I think it is because your opacity is set to 0. When I removed it, it seems to display the radio button: http://jsfiddle.net/T4eBA/3/ If that doesnt work, can you provide details on your directory structure? The way you currently have your css laid out, I would predict your structure to be like:

index.html, image, css, ...etc

Upvotes: 0

Related Questions