Я забуваю, де я вперше побачив це згадане, але ви фактично можете вставити свої мітки в контейнер в іншому місці, поки у вас є 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]:checkedелемента DOM до headerконтейнера, а потім використовувати селекціонери / дочірні селектори для доступу до labelсамих s, що дозволяє можливість стилізувати їх, коли їх встановлені відповідні радіоботи / прапорці .
Ми можемо не лише розміщувати етикетки, а й стилізувати інший вміст, який може бути нащадком контейнера для братів і сестер відносно всіх inputs. А тепер на хвилину, яку ви всі чекали, JSFIDDLE ! Ідіть туди, пограйте з ним, змусьте це працювати для вас, з’ясуйте, чому це працює, зламайте, робіть те, що ви робите!
Сподіваємось, що все має сенс і повністю відповідає на питання і, можливо, будь-які подальші спостереження, які можуть виникнути.
<label for="rad1">Radio 1</label><input id="rad1" type="radio" name="rad">