html - 单击时单选按钮更改 css

Question

请看一下http://jsfiddle.net/JHMqG/

我试图弄清楚单击时如何更改单选按钮的背景。

到目前为止，我在 cat 选项上取得了成功，但我被困在 dog 选项上。我需要狗选项才能工作，因为我希望背景更改包括圆形按钮。

请指教。谢谢你。

Answer 1

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

Answer 2

看到这个：

演示

我改变了一点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;
}

Answer 3

问题是在 cat 选项中的<input>前面<label>，但在 dog 选项<input>中，在<label.

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

http://jsfiddle.net/SxPvz/