Cool Stuff
Today
I'm showing cool stuff in this article!
是否可以将css(3)样式应用于选中的单选按钮的标签？
我有以下标记:
我希望是那样的
label:checked { font-weight: bold; }
会做点什么,但唉它没有(正如我预期的那样).
是否有可以实现此类功能的选择器？如果有帮助,您可以使用div等环绕,但最好的解决方案是使用标签''for''属性.
应该注意的是,我能够为我的应用程序指定浏览器,所以请最好使用css3类等.
input[type="radio"]:checked+label{ font-weight: bold; }
//a label that immediately follows an input of type radio that is checked
适用于以下标记非常好:
......只要标签跟随无线电输入,它就适用于任何结构,有或没有div等.
例:
input[type="radio"]:checked+label { font-weight: bold; }
我知道这是一个老问题,但是如果你想成为一个孩子,而不是让它们分开,这里有一个纯粹的CSS方式你可以完成它:
:checked + span { font-weight: bold; }
然后用以下内容包装文本:
在JSFiddle上看到它.
我忘记了我第一次看到它提到的地方,但只要你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;
}
Cool Stuff
Today
I'm showing cool stuff in this article!
Not As Cool
Tuesday
This stuff isn't nearly as cool for some reason :(;
Cool Tech Article
Last Monday
This article has awesome stuff all over it!
Cool Personal Article
Two Fridays Ago
This article talks about how I got a job at a cool startup because I rock!
京公网安备 11010802040832号 | 京ICP备19059560号-6 
