CODEWITHSUNDEEP
javascripthtmlcss
Tobias
Tobias

Reputation: 43

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 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();
    };
};

Upvotes: 2

Views: 2861

Answers (3)

johnmanoahs
johnmanoahs

Reputation: 71

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.

Upvotes: 0

Derek 朕會功夫
Derek 朕會功夫

Reputation: 94409

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));
}

Upvotes: 1

curtisdf
curtisdf

Reputation: 4210

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.

Upvotes: 2

Related Questions