Question

请查看http://jsfiddle.net/JHMqG/

我正在尝试弄清楚如何在点击时更改单选按钮的背景。

到目前为止，我已经成功使用了cat选项，但我仍然坚持使用dog选项。我需要狗选项才能工作，因为我希望背景更改包含圆形按钮。

请指教。谢谢。

Answer 1

你走了：http://jsfiddle.net/JHMqG/1/
在狗身上，label元素只包含文本。在cat上，label元素包含文本和单选按钮。另外，我稍微清理了你的HTML。

Answer 2

问题是<input>就在cat选项的<label>之前，但在dog选项中，<input> 里面 {{1} }}

我通过将狗的<label选项移到标签前面来纠正它，你可以看到它在这里工作：

http://jsfiddle.net/SxPvz/

Answer 3

见：

DEMO

我改变了HTML：

<div>
<input type="radio" name=1 Value=420 id="a1">
<label for="a1" class="radiostyle" >Cat ($420)</label>
</div>
<div>
    <input type="radio" name=1 Value=375 id="a2">
    <label for="a2" class="radiostyle">Dog ($375)</label>
</div>

并在CSS中添加了几位，所以它现在看起来像这样：

div { margin: .5em; }
input, label {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
input[type=radio] { margin-right: -1.65em; z-index: 2; }
.radiostyle{
    background-color: #CCC;
    border-radius: 8px;
    padding: 4px 4px 4px 1.75em;
}

.radiostyle:hover{
    background-color: #0F6;    
    cursor:pointer;
}

input[type=radio]:checked+label {
    /* Or `#a1:checked+label` if you only want it for that input */
    background-color: #0F6;
}

单击单选按钮更改css

3 个答案:

DEMO