Custom Images As Radio Buttons

I have been trying to make custom radio buttons using HTML, CSS, and JavaScript. I've been looking through the previous questions about radio buttons and I feel like I've implement

Solution 1:

It's hard to say without being able to run your code, or at least to see a screenshot of how it looks. But it sounds to me like the width and/or height of your radio button (or the containing element around it) is too small for the size of image you're using. If so, a CSS declaration specifying the appropriate width or height should fix it.

EDIT: To troubleshoot these kinds of things, I like to do my work in Chrome browser so I can use its built-in developer tools. In Chrome I can right-click on an element and choose "Inspect Element". This enables me to browse the DOM and see what CSS specifiers are affecting each element, and experimentally tweak them until I've diagnosed the problem.

Solution 2:

Make sure your image file is the same size as the radio button.

Anyway, I don't see why there is JavaScript. It can be in pure CSS: http://jsfiddle.net/DerekL/9MtMx/

input[type="radio"]{
    -webkit-appearance:none;
    -moz-appearance:none;
    border-radius:8px;
    border:1px solid #dbdbdb;
    width:16px;
    height:16px;
    cursor:pointer;
    margin:01px;
    background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(#f2f2f2));
    vertical-align:bottom;
}

input[type="radio"]:checked{
    background-position:0px0px;
    background-image: url('checked.png'), -webkit-gradient(linear, left top, left bottom, from(white), to(#f2f2f2));
}

Solution 3:

The CSS way of doing this is apt but unfortunately we still need to put up with IE 6, 7 and 8 which may not support this. The best way is to settle for a JS method, only for non-compatible browsers (IE!!!!) and still use the CSS for the rest.