Question

尝试创建有趣的表单。这就是我到目前为止所做的：

html：

<form>
    <ul>
        <li>
            <input type="radio" name="opinions" id="radio-1" />
            <label for="radio-1"></label>
            <label for="radio-1">Latest</label>
        </li>
        <li>
            <input type="radio" name="opinions" id="radio-2" />
            <label for="radio-2"></label>
            <label for="radio-2">Random</label>
        </li>
        <li>
            <input type="radio" name="opinions" id="radio-3" />
            <label for="radio-3"></label>
            <label for="radio-3">Favorites</label>
        </li>
        <li>
            <input type="radio" name="opinions" id="radio-4" />
            <label for="radio-4"></label>
            <label for="radio-4">Most Views</label>
        </li>
        <ul>
</form>

和css：

/*hide button & text label*/
input[type="radio"], input[type="radio"] + label + label {
    display: none;
}

/*Hide list bullets*/
ul {
    list-style: none;
}

/*Push label text down so it's not on image*/
input[type="radio"] + label + label {
    padding-top: 20px;
}

/*display text label on hover*/
input[type="radio"]:hover + label + label, input[type="radio"] + label:hover + label,       input[type="radio"] + label + label:hover, ul li:hover {
    display: block;
    color: white;
    width: 90px;
}

ul li {
     display: block;
     float:left;
     height: 60px;
     width: 50px;
     text-align: center;
     border: 1px solid cyan;
     background: #555;
}

/*display picture that acts as radio button*/
 input#radio-1+label {
    background: url('http://s30.postimg.org/53vskoxfl/time_added.png') no-repeat;
    background-size: 30px 30px;
    padding-left: 30px;
    padding-bottom: 30px;
    vertical-align: top;
}
/*change image color on hover & selected*/
 input#radio-1:checked+label, input#radio-1:hover+label {
    background: url('http://s30.postimg.org/4jgri0475/time_added_selected.png') no-repeat;
    background-size: 30px 30px;
    padding-left: 30px;
    padding-bottom: 30px;
    vertical-align: top;
}
input#radio-2+label {
    background: url('http://s30.postimg.org/ew3242xq9/random.png') no-repeat;
    background-size: 30px 30px;
    padding-left: 30px;
    padding-bottom: 30px;
    vertical-align: top;
}
input#radio-2:checked+label, input#radio-2:hover+label {
    background: url('http://s30.postimg.org/cu2kptzr5/random_selected.png') no-repeat;
    background-size: 30px 30px;
    padding-left: 30px;
    padding-bottom: 30px;
    vertical-align: top;
}
input#radio-3+label {
    background: url('http://s30.postimg.org/c1uutip8h/favorites.png') no-repeat;
    background-size: 30px 30px;
    padding-left: 30px;
    padding-bottom: 30px;
    vertical-align: top;
}
input#radio-3:checked+label, input#radio-3:hover+label {
    background: url('http://s30.postimg.org/uiubhgbi9/favorites_selected.png') no-repeat;
    background-size: 30px 30px;
    padding-left: 30px;
    padding-bottom: 30px;
    vertical-align: top;
}
input#radio-4+label {
    background: url('http://s30.postimg.org/on0du1w75/views.png') no-repeat;
    background-size: 30px 30px;
    padding-left: 30px;
    padding-bottom: 30px;
    vertical-align: top;
}
input#radio-4:checked+label, input#radio-4:hover+label {
    background: url('http://s30.postimg.org/3re3it001/views_selected.png') no-repeat;
    background-size: 30px 30px;
    padding-left: 30px;
    padding-bottom: 30px;
    vertical-align: top;
}

所以我非常接近我的目标。哪个与>wallhaven<上的顶级菜单链接具有相同的样式。但是，我想把它变成一个无线电选项，你可以选择一个选项。如果可能的话，我也想避免使用javascript。

问题：

李不是完全可选择/可收回的。我怎样才能解决这个问题。这是主要问题。
另外，我不相信我必须使用列表，而只是使用单选按钮。无法弄清楚如何避免这种情况。无论如何要避免使用列表？
加载图片非常重复。无论如何要限制重复？

谢谢大家！

Answer 1

您无法在不使用JavaScript的情况下选择li元素。{li>此元素在设计上是静态的（仅限演示文稿）。您可以使用标签来选择单选按钮，但要管理其状态（以及它的可视化表示），您必须引用JavaScript。
您不必使用列表，您只需堆叠labels和无线电，就像在我的分叉代码中一样：http://codepen.io/anon/pen/dPYaMj。我还为你清理了它，并在jQuery的帮助下使它工作得更好。
您基本上有两种选择：您可以使用图片精灵或图标字体（有很多免费的，有些可以定制为了您的需要）。

如何使Li可点击内部的单选按钮

1 个答案: