Zapomniałem, gdzie pierwszy raz o tym wspomniałem, ale tak naprawdę możesz osadzić swoje etykiety w pojemniku w innym miejscu, o ile masz for=ustawiony atrybut. Sprawdźmy więc przykład 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>
Uff To było dużo jak na „próbkę”, ale wydaje mi się, że to naprawdę wpływa na efekt i punkt: możemy z pewnością wybrać etykietę dla sprawdzonej kontroli wejściowej, bez bycia rodzeństwem. Sekret polega na utrzymywaniu inputtagów dziecka tylko do tego, czym muszą być (w tym przypadku - tylko bodyelement) .
Ponieważ labelelement nie używa :checkedpseudo selektora, nie ma znaczenia, że etykiety są przechowywane w header. Ma tę dodatkową zaletę, że ponieważ headerjest rodzeństwem, możemy użyć ~ogólnego selektora rodzeństwa, aby przejść z input[type=radio]:checkedelementu DOM do headerkontenera, a następnie użyć selektora potomka / potomka, aby uzyskać dostęp do labelsamych siebie, umożliwiając ich stylizację, gdy ich odpowiednie pola wyboru / pola wyboru są zaznaczone .
Nie tylko możemy stylizować etykiety, ale także stylizować inne treści, które mogą być potomkami kontenera rodzeństwa w stosunku do wszystkich inputliter. A teraz, na chwilę, na którą wszyscy czekali, JSFIDDLE ! Idź tam, baw się nim, spraw, by działał dla Ciebie, dowiedz się, dlaczego to działa, zepsuć go, rób to, co robisz!
Mam nadzieję, że wszystko to ma sens i w pełni odpowiada na pytanie oraz możliwe dalsze działania, które mogą się pojawić.
<label for="rad1">Radio 1</label><input id="rad1" type="radio" name="rad">