Question

Would it be possible give each radio button its own background image using jQuery? What I mean is:

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

and I’m trying to add CSS to each class. For example:

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

Answer 1

Background images don’t work so well with the radio buttons themselves. What you can do is wrap them each in a <label> as follows:

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

Then, your CSS should work as-is.