html – CSS – 如何风格所选的单选按钮标签?

我想为单选按钮的所选标签添加样式:

HTML:

<div class="radio-toolbar">
 <label><input type="radio" value="all" checked>All</label>
 <label><input type="radio" value="false">Open</label>
 <label><input type="radio" value="true">Archived</label>
</div>

CSS

.radio-toolbar input[type="radio"] {display:none;}
.radio-toolbar label {
    background:Red;
    border:1px solid green;
    padding:2px 10px;
}
.radio-toolbar label + input[type="radio"]:checked { 
    background:pink !important;
}

任何想法我做错了什么?

HTML:

<div class="radio-toolbar">  
    <input type="radio" id="radio1" name="radios" value="all" checked>
    <label for="radio1">All</label>

    <input type="radio" id="radio2" name="radios"value="false">
    <label for="radio2">Open</label>

    <input type="radio" id="radio3" name="radios" value="true">
    <label for="radio3">Archived</label>
</div>

CSS:

.radio-toolbar input[type="radio"] {
    display:none;
}

.radio-toolbar label {
    display:inline-block;
    background-color:#ddd;
    padding:4px 11px;
    font-family:Arial;
    font-size:16px;
}

.radio-toolbar input[type="radio"]:checked + label {
    background-color:#bbb;
}

现场演示:http://jsfiddle.net/heZBT/

首先,你可能想在单选按钮上添加name属性。否则,它们不是同一组的一部分,可以检查多个单选按钮。

此外,由于我把标签作为兄弟姐妹(单选按钮),我不得不使用id和属性将它们关联在一起。

http://stackoverflow.com/questions/4641752/css-how-to-style-a-selected-radio-buttons-label

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:html – CSS – 如何风格所选的单选按钮标签?