CSS - 如何风格所选的单选按钮标签？ [英] CSS - How to Style a Selected Radio Buttons Label?

问题描述

我要为单选按钮的所选标签添加样式：

HTML：

 < div class =radio-toolbar> 
< label>< input type =radiovalue =allchecked>全部< / label& 
< label>< input type =radiovalue =false>打开< / label& 
< label>< input type =radiovalue =true>已归档< / label> 
< / div> 
  

CSS

< pre class =lang-css prettyprint-override> .radio-toolbar input [type =radio] {display：none;}
.radio工具栏标签{
背景：红色;
border：1px solid green;
padding：2px 10px;
}
.radio-toolbar label + input [type =radio]：checked {
background：pink！important;
}


任何想法我做错了什么？

解决方案

HTML：

 < div class =radio-toolbar> 
< input type =radioid =radio1name =radiosvalue =allchecked> 
< label for =radio1>全部< / label> 
 
< input type =radioid =radio2name =radiosvalue =false> 
< label for =radio2>打开< / label> 
 
< input type =radioid =radio3name =radiosvalue =true> 
< label for =radio3>已归档< / label> 
< / div> 
  

CSS：

  .radio-toolbar input [type =radio] {
 display：none; 
} 
 
 .radio工具栏标签{
 display：inline-block; 
 background-color：#ddd; 
 padding：4px 11px; 
 font-family：Arial; 
 font-size：16px 
} 
 
 .radio工具栏输入[type =radio]：checked + label {
 background-color：#bbb; 
} 
  

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

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

此外，由于我将标签放置为兄弟姐妹（单选按钮），我不得不使用 id 和 属性将它们关联在一起。

I want to add a style to a radio button's selected label:

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

Any ideas what I'm doing wrong?

解决方案

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

Live demo: http://jsfiddle.net/heZBT/

First of all, you probably want to add the name attribute on the radio buttons. Otherwise, they are not part of the same group, and multiple radio buttons can be checked.

Also, since I placed the labels as siblings (of the radio buttons), I had to use the id and for attributes to associate them together.

这篇关于CSS - 如何风格所选的单选按钮标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！