用于选中的单选按钮标签的CSS选择器

221

是否可以将css（3）样式应用于选中的单选按钮的标签？

我有以下标记：

<input type="radio" id="rad" name="radio"/>
<label for="rad">A Label</label>

我希望的是 

label:checked { font-weight: bold; }

会做某事，但是可惜它没有（我预期的那样）。

是否有一个选择器可以实现这种功能？如果有帮助，您可以将divs围起来，但是最好的解决方案是使用标签“ for”属性。

应该注意的是，我能够为我的应用程序指定浏览器，所以请最好使用css3等类。

forms  css 
— 史提芬
source

Answers:

361

尝试+符号：它是相邻的同级组合器。它结合了两个具有相同父级的简单选择器序列，第二个选择器必须在第一个选择器之后立即出现。

因此：

input[type="radio"]:checked+label{ font-weight: bold; } 
 //a label that immediately follows an input of type radio that is checked

适用于以下标记：

<input id="rad1" type="radio" name="rad"/><label for="rad1">Radio 1</label>
<input id="rad2" type="radio" name="rad"/><label for="rad2">Radio 2</label>

...，只要标签跟随无线电输入，它将适用于任何结构，带有或不带有div等。

例：

input[type="radio"]:checked+label { font-weight: bold; }
<input id="rad1" type="radio" name="rad"/><label for="rad1">Radio 1</label>
<input id="rad2" type="radio" name="rad"/><label for="rad2">Radio 2</label>
展开摘要

— 史提芬
source
11
无论如何，有没有这样做，但是标签是先前的元素EG：<label for="rad1">Radio 1</label><input id="rad1" type="radio" name="rad">
— Nathan Koop 2012年
17
您可以使用tilda ~选择不一定相邻的兄弟元素。css-tricks.com/child-and-sibling-selectors
— 马丁
1
谢谢，这只是帮助我创建了没有JS的“图像单选按钮”。
— KillerX
9
值得注意的是，由于不支持:checked选择器，因此在IE 8中将无法使用。
— Mark Amery 2014年
2
@Martin以防万一您想知道，这实际上不适用于您的情况，因为标签仍需要跟随输入。“ +”和“〜”之间的区别在于标签是直接相邻还是一般相邻：标签是下一个元素还是仅下一个元素。
— Njord
127

我知道这是一个古老的问题，但是如果您希望<input>成为子代<label>而不是将它们分开，则可以采用一种纯CSS的方式来实现：

:checked + span { font-weight: bold; }

然后，只需用<span>：包裹文本即可：

<label>
   <input type="radio" name="test" />
   <span>Radio number one</span>
</label>

在JSFiddle上看到它。

— 麦克风
source
优秀的。当处理的剃须刀情况时<label>@Html.RadioButtonFor(..) someText<label>，这非常有用<span>。谢谢！
— S1r-Lanzelot'5
真好！没想到这一点。
— 马修·迪恩
正是我所需要的！谢谢。
— 瑞安
如果您想使用：checked设置：active标签样式，该怎么办？这不是真正的解决方案。
— Maciej Krawczyk
2
@MaciejKrawczyk这不是您的解决方案，因为您的用例完全不同。如果您想设置：active标签的样式，则可以这样做label:active { font-weight: bold; }。请参阅：jsfiddle.net/Gbq8Z/608（哇，我不敢相信小提琴已经被分叉了608次）。
— 迈克，
22

我忘记了最初提到它的地方，但是实际上只要您for=设置了属性，就可以将标签嵌入其他地方的容器中。因此，让我们检查一下SO的示例：

* {
  padding: 0;
  margin: 0;
  background-color: #262626;
  color: white;
}

.radio-button {
  display: none;
}

#filter {
  display: flex;
  justify-content: center;
}

.filter-label {
  display: inline-block;
  border: 4px solid green;
  padding: 10px 20px;
  font-size: 1.4em;
  text-align: center;
  cursor: pointer;
}

main {
  clear: left;
}

.content {
  padding: 3% 10%;
  display: none;
}

h1 {
  font-size: 2em;
}

.date {
  padding: 5px 30px;
  font-style: italic;
}

.filter-label:hover {
  background-color: #505050;
}

#featured-radio:checked~#filter .featured,
#personal-radio:checked~#filter .personal,
#tech-radio:checked~#filter .tech {
  background-color: green;
}

#featured-radio:checked~main .featured {
  display: block;
}

#personal-radio:checked~main .personal {
  display: block;
}

#tech-radio:checked~main .tech {
  display: block;
}
<input type="radio" id="featured-radio" class="radio-button" name="content-filter" checked="checked">
<input type="radio" id="personal-radio" class="radio-button" name="content-filter" value="Personal">
<input type="radio" id="tech-radio" class="radio-button" name="content-filter" value="Tech">

<header id="filter">
  <label for="featured-radio" class="filter-label featured" id="feature-label">Featured</label>
  <label for="personal-radio" class="filter-label personal" id="personal-label">Personal</label>
  <label for="tech-radio" class="filter-label tech" id="tech-label">Tech</label>
</header>

<main>
  <article class="content featured tech">
    <header>
      <h1>Cool Stuff</h1>
      <h3 class="date">Today</h3>
    </header>

    <p>
      I'm showing cool stuff in this article!
    </p>
  </article>

  <article class="content personal">
    <header>
      <h1>Not As Cool</h1>
      <h3 class="date">Tuesday</h3>
    </header>

    <p>
      This stuff isn't nearly as cool for some reason :(;
    </p>
  </article>

  <article class="content tech">
    <header>
      <h1>Cool Tech Article</h1>
      <h3 class="date">Last Monday</h3>
    </header>

    <p>
      This article has awesome stuff all over it!
    </p>
  </article>

  <article class="content featured personal">
    <header>
      <h1>Cool Personal Article</h1>
      <h3 class="date">Two Fridays Ago</h3>
    </header>

    <p>
      This article talks about how I got a job at a cool startup because I rock!
    </p>
  </article>
</main>
展开摘要

ew。对于一个“样本”来说，这很多了，但我觉得它的确能带动效果和意义：我们当然可以为选中的输入控件选择一个标签，而不必成为它的兄弟。秘诀在于让input标签成为孩子的唯一标签（在这种情况下，仅是body元素）。

由于该label元素实际上并没有利用:checked伪选择器，因此标签存储在中也没有关系header。它确实具有额外的好处，因为header是兄弟元素，我们可以使用~通用兄弟选择器将其从input[type=radio]:checkedDOM元素移至header容器，然后使用子代/子选择器来访问labels本身，从而允许在其s 时为其设置样式选中各个单选框/复选框。

我们不仅可以设置标签样式，还可以设置其他内容的样式，这些内容可能是相对于所有inputs 的同级容器的后代。现在，您一直在等待JSFIDDLE！到那里去玩，让它为您服务，找出它为什么起作用，打破它，做您想做的事！

希望一切都有意义，并能充分回答问题，并可能会跟进任何后续行动。

— 内森·布莱尔
source
2
这就是这个问题的答案。其他正确的东西本质上是超基本的。尽管这解决了一些更复杂和有趣的事情，但还是很想抓住它。
— morphles
尽管对此问题施加了一定的限制，但该问题的公认答案具有> 30倍的投票数，从而完全消除了该答案。与许多声称具有令人鼓舞信息的类似炒作不同，这实际上可以实现要求。非常了不起的工作，非常感谢。
— naughtilus
1
@naughtilus-此答案完全消除了简单答案的局限性，因为它明确定义了每个选项的样式。即我的约束您具有结构惯例；这使您无法为每个单选按钮和结果编写CSS。
— 斯蒂芬，
@morphles simple！=“超级基本”：此解决方案更加复杂，有趣且功能强大-对于此精确代码；我的将遵循以下1条约定在所有页面上工作
— Stephen
1

如果您的输入是的子元素，label并且有多个标签，则可以将@Mike的把戏与Flexbox+ 结合使用order。

在此处输入图片说明

html 
<label class="switchLabel">
  <input type="checkbox" class="switch"/>
  <span class="left">Left</span>
  <span class="right">Right</span>
</label>
的CSS 
label.switchLabel {
  display: flex;
  justify-content: space-between;
  width: 150px;
}
.switchLabel .left   { order: 1; }
.switchLabel .switch { order: 2; }
.switchLabel .right  { order: 3; }

/* sibling selector ~ */
.switchLabel .switch:not(:checked) ~ span.left { color: lightblue }
.switchLabel .switch:checked ~ span.right { color: lightblue }

在JSFiddle上看到它。

注意：同级选择器只能在同一父级中使用。要解决此问题，您可以使用@Nathan Blair hack 在顶级隐藏输入。

— Qwerty
source
-1

您可以使用一些jQuery：

$('input:radio').click(function(){
    $('label#' + $(this).attr('id')).toggleClass('checkedClass'); // checkedClass is defined in your CSS
});

您还需要确保选中的单选按钮在页面加载时也具有正确的类别。

— 丹·赫德
source
3
是的...当然可以通过javascript（框架）执行此操作，但是它并不像看起来那样简单。如果其他复选框已经选中，会发生什么情况？如果选择了同一组中的另一个无线电，什么脚本将删除此类？真的太复杂了。我想使用浏览器的内置form + css功能，因为它每次都可以使用。
— 斯蒂芬，
4
您的选择器应该是$('label[for="' + $(this).attr('id') + '"]').toggleClass();
— Wesley Murch
-3

更新：

这仅对我有用，因为我们现有的生成的html太古怪了，生成labels和radios并赋予它们both checked属性。

没关系，Brilliand带来了巨大的成功！

如果您的标签是复选框的同级标签（通常是这种情况），则可以使用~同级选择器，并使用a label[for=your_checkbox_id]来解决该问题……或者如果您有多个标签，请给标签添加一个ID（例如在本示例中，使用标签作为按钮）

来到这里寻找相同的东西-但最终在文档中找到了我的答案。

可以选择label具有checked属性的元素，如下所示：

label[checked] {
  ...
}

我知道这是一个老问题，但也许可以帮助某个人:)

— 学徒
source
5
标签应该如何检查？
— Brilliand 2014年
2
嘿，好抓。没有。显然，我们有一些古怪的代码，可以生成带有单选按钮的标签，并在生成html时为两者都添加“ checked”属性。但这并不是真的有效...所以这是完全不可用的。我将编辑答案，我不知道为什么要为此投票。谢谢！
— apprenticeDev
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.