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

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

我有以下 HTML 代码:

我希望的是

label:checked { font-weight: bold; }

会做些什么，但是，唉，它没有(如我所料)。

是否有一种选择器可以实现这种功能?如果有帮助，你可以使用div等，但最好的解决方案是使用标签“for”属性。

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

467184 次浏览
小开
最佳答案

尝试+符号: 它是相邻兄弟组合子。它将两个具有相同父元素的简单选择器序列组合在一起，并且第二个选择器必须在第一个选择器之后立即

是这样的:

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>

小开

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

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

然后用<span>来包装文本:

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

在JSFiddle上见。

小开

更新:

这只适用于我，因为我们现有的生成html是古怪的，生成__abc0和__abc1，并赋予它们checked属性。

没关系，为Brilliand的提议鼓掌!

如果你的标签是一个复选框的兄弟姐妹(通常是这样)，你可以使用~兄弟姐妹选择器，并使用label[for=your_checkbox_id]来寻址它…或者如果你有多个标签，给标签一个id(就像在这个例子中，我使用标签按钮)

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

具有checked属性的label元素可以像这样选择:

label[checked] {
...
}

我知道这是一个老问题，但也许它能帮助到一些人:)

小开

我忘记我第一次在哪里看到它，但你实际上可以将你的标签嵌入到容器的其他地方，只要你有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>

唷。这对于一个“样本”来说太多了，但我觉得它确实能说明问题:我们当然可以为一个已检查的输入控件选择一个标签，而不是它的兄弟姐妹。秘密在于将__ABC0标记作为子标记，只保留它们需要的内容(在本例中，只保留body元素)。。

由于label元素实际上没有使用:checked伪选择器，所以标签存储在header中并不重要。它确实有额外的好处，因为header是一个兄弟元素，我们可以使用~通用兄弟选择器从input[type=radio]:checked DOM元素移动到header容器，然后使用后代/子选择器访问__abc0本身，当它们各自的单选框/复选框被选中时，允许对它们进行样式设置。

我们不仅可以设置标签的样式，还可以设置其他内容的样式，这些内容可能是相对于所有__abc0的兄弟容器的后代。现在是大家期待已久的时刻，JSFIDDLE!去那里，玩它，让它为你工作，找出为什么它工作，打破它，做你所做的!

希望这一切都是有意义的，并完全回答了问题，以及可能出现的任何后续问题。

小开

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

enter image description here

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>
asd < / p > 超文本标记语言 
<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。


提交答案