已选中单选按钮标签的CSS选择器

Question

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

我有以下标记:

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

我希望是那样的

label:checked { font-weight: bold; }

会做点什么,但唉它没有(正如我预期的那样).

是否有可以实现此类功能的选择器？如果有帮助,您可以使用div等环绕,但最好的解决方案是使用标签''for''属性.

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

Answer 1

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>

Answer 2

我知道这是一个老问题,但是如果你想<input>成为一个孩子,<label>而不是让它们分开,这里有一个纯粹的CSS方式你可以完成它:

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

然后用以下内容包装文本<span>:

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

在JSFiddle上看到它.

Answer 3

我忘记了我第一次看到它提到的地方,但只要你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>

呼.对于"样本"来说,这是很多的,但我觉得它确实带来了效果并指出:我们当然可以为已检查的输入控件选择一个标签,而不是兄弟姐妹.秘诀在于将input标签保持为只有他们需要的东西(在这种情况下 - 只有body元素).

由于label元素实际上并没有使用:checked伪选择器,因此标签存储在其中并不重要header.它确实有一个额外的好处,因为它header是一个兄弟元素,我们可以使用~通用兄弟选择器从input[type=radio]:checkedDOM元素移动到header容器,然后使用后代/子选择器来访问label它们自己,允许在它们的时候设置它们的样式.选择相应的无线电盒/复选框.

我们不仅可以设置标签的样式,还可以设置其他内容,这些内容可能是兄弟容器的后代相对于所有inputs.现在,你们一直在等待,JSFIDDLE!去那里,玩它,让它为你工作,找出它的工作原理,打破它,做你做的!

希望所有这些都有意义并完全回答这个问题以及可能出现的任何后续问题.

Answer 4

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

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 }



/* style the switch */

:root {
  --radio-size: 14px;
}

.switchLabel input.switch  {
  width: var(--radio-size);
  height: var(--radio-size);
  border-radius: 50%;
  border: 1px solid #999999;
  box-sizing: border-box;
  outline: none;
  -webkit-appearance: inherit;
  -moz-appearance: inherit;
  appearance: inherit;
  
  box-shadow: calc(var(--radio-size) / 2) 0 0 0 gray, calc(var(--radio-size) / 4) 0 0 0 gray;
  margin: 0 calc(5px + var(--radio-size) / 2) 0 5px;
}

.switchLabel input.switch:checked {
  box-shadow: calc(-1 * var(--radio-size) / 2) 0 0 0 gray, calc(-1 * var(--radio-size) / 4) 0 0 0 gray;
  margin: 0 5px 0 calc(5px + var(--radio-size) / 2);
}

<label class="switchLabel">
  <input type="checkbox" class="switch" />
  <span class="left">Left</span>
  <span class="right">Right</span>
</label>

阿斯达

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将输入隐藏在顶层。