Question

是否可以使用jQuery为每个单选按钮提供自己的背景图像？我的意思是：

Example image

<form id="tiepspiel" name="tiepspiel" action="#" method="POST">
        <ul id="sortable">
        <?php
        $count = 5;
        $i = 1;
        while ($i <= $count) {
            echo '<li><ul class="elements">
        <li class="selectable">
            <label class="stein"><input type="radio" name="selected__'.$i.'" value="stein</label>
            <span></span>
        </li>
        <li class="selectable">
            <label class="schere"><input type="radio" name="selected_'.$i.'" value="schere"></label>
            <span></span>
        </li>
        <li class="selectable">
            <label class="papier"><input type="radio" name="selected_'.$i.'" value="papier"></label>
            <span></span>
        </li>
    </ul>
                    </li>';
            $i++;
        }
        ?>
        <hr>
        <button>Submit</button>
        </ul>
        </form>

我正在尝试为每个类添加CSS。例如：

.papier {
    background-image: url("../images/papier_blue.png");
    width: 82px;
    height: 82px;
    cursor: pointer;
    margin-right: 50px;
}

Answer 1

使用单选按钮本身，背景图像效果不佳。您可以做的是将它们分别包装在<label>中，如下所示：

<ul class="elements">
    <li class="selectable">
        <label class="stein"><input type="radio" name="stein" value="stein"></label>
        <span></span>
    </li>
    <li class="selectable">
        <label class="schere"><input type="radio" name="schere" value="schere"></label>
        <span></span>
    </li>
    <li class="selectable">
        <label class="papier"><input type="radio" name="papier" value="papier"></label>
        <span></span>
    </li>
</ul>

然后，你的CSS应该按原样运作。

Answer 2

您将背景样式放在错误的类上。将它们放在.selectable类定义中。

Answer 3

我猜你需要一种“假单选按钮”。有很多方法可以做到这一点，包括jquery，或者你可以使用css轻松完成。有人告诉你，你必须用span或label包裹单选按钮。默认情况下，它们不是'block'元素，比如'div'，所以除非你不对它进行属性化（display：block;或display：inline-block;），否则你无法获得结果。另外，不要忘记设置宽度和高度（我的意思是跨度/标签），并将不透明度0设置为单选按钮。我建议您查看http://ajaxian.com/archives/custom-css-inputs或者您也可以查看http://www.iamntz.com/625/frontend-developer/formulare-custom-checkbox-radio-v-2/内部（如果是罗马尼亚语，请注意，您只需查看演示并查看代码）

没有火箭科学，你只需要照顾一些东西。

背景图像单选按钮

3 个答案: