Radio Button Styling

css input checkbox radio-button appearance
henryaaron picture henryaaron · Dec 16, 2011 · Viewed 14.2k times · Source

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/

Answer

animuson picture animuson · Dec 16, 2011

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.

Related questions

CSS checkboxes & radio buttons when input is inside label?

I've searched extensively on here for an answer to this but haven't quite come across what I'm looking for. Found this CSS - How to Style a Selected Radio Buttons Label? but the answer involved changing the markup, and that's …

Read More
How to remove focus border (outline) around text/input boxes? (Chrome)

Can anyone explain how to remove the orange or blue border (outline) around text/input boxes? I think it only happens on Chrome to show that the input box is active. Here's the input CSS I'm using: input { background-color: transparent; …

Read More
Is there any way to change input type="date" format?

I'm working with HTML5 elements on my webpage. By default input type="date" shows date as YYYY-MM-DD. The question is, is it possible to change its format to something like: DD-MM-YYYY?

Read More