7

I want to style radio buttons with pure CSS, no classes or IDs. Just input[type=radio]. I want to use a background image for unselected and selected. However, the -vendor-appearance:none; doesn't work with Trident or Gecko. Just Webkit. In those browsers you can see the background image as a background to the radio button but the button is still there rather than just displaying the image, how can I get rid of the button so just the background image displays. The fiddle: http://jsfiddle.net/7kScn/

henryaaron
  • 6,042
  • 20
  • 61
  • 80

3 Answers3

8

You can use a CSS2 selector trick to connect to a radio group and display other stuff immediately after.

See: http://jsfiddle.net/7kScn/1/

It's just a basic example, but it operates on the premise of hiding the input field and then styling the label immediately after it, giving it the effect that it's the actual thing you're checking.

animuson
  • 53,861
  • 28
  • 137
  • 147
  • CSS3? :( it's an ecommerce site, none of the functionality can be based on CSS3 just the style. If it falls back to just display the checkboxes like it normally would than that's acceptable, but if you're calling `display:none;` than I can't really use that. – henryaaron Dec 16 '11 at 01:45
  • According to [this compatibility chart](http://www.quirksmode.org/css/contents.html), this specific selector should work fine in its current state. It's only unsupported in IE6 (those notes about static for IE7/8 don't affect this use of it). It appears to have been CSS2 (?). – animuson Dec 16 '11 at 01:48
  • But my site doesn't use labels, how would it work without the + label – henryaaron Dec 16 '11 at 02:02
  • You can't remove the actual box from them with CSS, that is what the radio/checkbox *is*. The only other solution would be to use JavaScript to modify the HTML there to make them fancy. – animuson Dec 16 '11 at 02:06
  • Just checked with Adobe BrowserLab, works in IE7 + in IE6 falls back to standard visibility. That's great, now what about the labels is there a workaround? – henryaaron Dec 16 '11 at 02:17
1

Is this of use? input[type=radio]:checked { border: 1px solid black; }

James Alarie
  • 21
  • 1
0

I wrote a tutorial about how to customize checkboxes and radios with CSS only, as well as create on/off switches via styling the label and using it's :before and :after pseudoclasses. Maybe this helps :) Read it here: http://blog.felixhagspiel.de/index.php/posts/custom-inputs

Felix Hagspiel
  • 2,634
  • 2
  • 30
  • 43