CODEWITHSUNDEEP
cssinputcheckboxradio-buttonappearance
henryaaron
henryaaron

Reputation: 6202

Radio Button Styling

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/

Upvotes: 7

Views: 14377

Answers (3)

Felix Hagspiel
Felix Hagspiel

Reputation: 2947

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

Upvotes: 0

James Alarie
James Alarie

Reputation: 21

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

Upvotes: 1

animuson
animuson

Reputation: 54787

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.

Upvotes: 8

Related Questions