jquery - 背景图像单选按钮

Question

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

<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

背景图像不能很好地与单选按钮本身配合使用。您可以做的是将它们分别包装在 a<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正如有人所说，您必须用or包裹单选按钮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/（不管它是不是罗马尼亚语，

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