自定义图像为单选按钮 [英] Custom images as radio buttons

问题描述

我一直在尝试使用HTML，CSS和JavaScript来创建自定义单选按钮。我一直在寻找关于单选按钮的以前的问题，我觉得我已实施的建议，但我的JPEG图像仍然被削减一半。我显然缺少一些东西，但不知道是什么。下面是我的HTML CSS和JavaScript。任何输入将非常感谢。

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代码

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

推荐答案

很难说没有能够运行你的代码，或至少看到它的外观的截图。但是听起来像我的宽度和/或高度的单选按钮（或其周围的包含元素）太小，与您使用的图像的大小。如果是这样，一个CSS声明指定适当的宽度或高度应该修复它。

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.

编辑：为了排除这些类型的问题，我喜欢在Chrome浏览器中做我的工作我可以使用其内置的开发工具。在Chrome中，我可以右键单击元素，然后选择检查元素。这使我可以浏览DOM，看看什么CSS说明符影响每个元素，并实验调整它们，直到我诊断出问题。

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.

这篇关于自定义图像为单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！