单击时单选按钮更改 css答案

【问题标题】：Radio button change css when clicked单击时单选按钮更改 css
【发布时间】：2012-09-08 09:04:11
【问题描述】：

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

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

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

请指教。谢谢。

【问题讨论】：

标签： html css button background radio

【解决方案1】：

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

【讨论】：

你必须使用 Javascript。

【解决方案2】：

看这个：

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

【讨论】：

【解决方案3】：

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

我通过将 dog 选项的 <input> 移动到标签之前来更正它，您可以在此处看到它的工作原理：

http://jsfiddle.net/SxPvz/

【讨论】：

我知道这种方式可行，但我希望绿色背景包含单选按钮