Custom images as radio buttons

Question

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 implemented the suggestions, but my jpeg images are still being cut in half. I'm clearly missing something, but not sure what it is. Below is my HTML CSS and JavaScript. Any input would be greatly appreciated.

<style TYPE="text/css">
.has-js .label_check,
.has-js .label_radio { padding-left: 40px;}
.has-js .label_radio {
background: url(images/radio_button-21.jpg) no-repeat;
width: 33px;
height: 35px;}

.has-js .label_check { background: url(check-off.png) no-repeat; }
.has-js label.c_on { background: url(check-on.png) no-repeat; }
.has-js label.r_on { 
background: url(images/radio_button_selected.jpg) no-repeat;
width: 33px;
height: 35px;}

.has-js .label_check input,
.has-js .label_radio input { position: absolute; left: -9999px;}

</style>

</head>

<label class="label_radio" for="radio-01">
    <input name="sample-radio" id="radio-01" value="1" type="radio" />
    Yes
</label>


<br />
<br />

<label class="label_radio" for="radio-02">
    <input name="sample-radio" id="radio-02" value="2" type="radio" />
    No
</label>

<br />
<br />

<label class="label_radio" for="radio-03">
    <input name="sample-radio" id="radio-03" value="3" type="radio" />
    Maybe
</label>


</body>

JavaScript Code

onload = function() {

    var body = gebtn(d,'body')[0];
    body.className = body.className && body.className != '' ? body.className + ' has-js' : 'has-js';

    if (!d.getElementById || !d.createTextNode) return;
    var ls = gebtn(d,'label');
    for (var i = 0; i < ls.length; i++) {
        var l = ls[i];
        if (l.className.indexOf('label_') == -1) continue;
        var inp = gebtn(l,'input')[0];
        if (l.className == 'label_check') {
            l.className = (safari && inp.checked == true || inp.checked) ? 'label_check c_on' : 'label_check c_off';
            l.onclick = check_it;
        };
        if (l.className == 'label_radio') {
            l.className = (safari && inp.checked == true || inp.checked) ? 'label_radio r_on' : 'label_radio r_off';
            l.onclick = turn_radio;
        };
    };
};
var check_it = function() {
    var inp = gebtn(this,'input')[0];
    if (this.className == 'label_check c_off' || (!safari && inp.checked)) {
        this.className = 'label_check c_on';
        if (safari) inp.click();
    } else {
        this.className = 'label_check c_off';
        if (safari) inp.click();
    };
};
var turn_radio = function() {
    var inp = gebtn(this,'input')[0];
    if (this.className == 'label_radio r_off' || inp.checked) {
        var ls = gebtn(this.parentNode,'label');
        for (var i = 0; i < ls.length; i++) {
            var l = ls[i];
            if (l.className.indexOf('label_radio') == -1)  continue;
            l.className = 'label_radio r_off';
        };
        this.className = 'label_radio r_on';
        if (safari) inp.click();
    } else {
        this.className = 'label_radio r_off';
        if (safari) inp.click();
    };
};

I don't see any reason for JavaScript here. – Derek 朕會功夫 Jun 14 '12 at 00:19 — Derek 朕會功夫, Jun 14 '12 at 00:19

score 2 · Accepted Answer · answered Jun 14 '12 at 00:09

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.

Thanks Curtis I noticed I didn't have my bottom padding set for the actual button. I always forget Chrome has the inspect element feature even though it's my default browser. — Tobias, Jun 14 '12 at 00:24

score 1 · Answer 2 · answered Jun 14 '12 at 00:25

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:0 1px;
    background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(#f2f2f2));
    vertical-align:bottom;
}

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

score 0 · Answer 3 · answered Oct 17 '12 at 15:48

0

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.

answered Oct 17 '12 at 15:48

johnmanoahs

71
1
1
7

Custom images as radio buttons

3 Answers3

Linked