Tôi quên nơi tôi lần đầu tiên nhìn thấy nó được đề cập nhưng bạn thực sự có thể nhúng nhãn của bạn vào một thùng chứa ở nơi khác miễn là bạn có bộ for=thuộc tính. Vì vậy, hãy kiểm tra một mẫu trên 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>
Phù Đó là rất nhiều cho một "mẫu" nhưng tôi cảm thấy nó thực sự mang lại hiệu quả và quan điểm: chúng tôi chắc chắn có thể chọn nhãn cho một điều khiển đầu vào được kiểm tra mà không phải là anh chị em. Bí mật nằm ở việc giữ các inputthẻ một đứa trẻ chỉ là những gì chúng cần (trong trường hợp này - chỉ bodyphần tử) .
Vì labelphần tử không thực sự sử dụng :checkedbộ chọn giả, nên các nhãn được lưu trữ trong header. Nó có thêm lợi ích là vì headerlà phần tử anh chị em, chúng ta có thể sử dụng ~bộ chọn anh chị em chung để di chuyển từ input[type=radio]:checkedphần tử DOM sang vùng headerchứa và sau đó sử dụng bộ chọn con cháu / con để truy cập vào labelchính chúng, cho phép khả năng tạo kiểu cho chúng khi chúng hộp radio / hộp kiểm tương ứng được chọn .
Chúng tôi không chỉ có thể tạo kiểu cho các nhãn mà còn tạo kiểu cho các nội dung khác có thể là hậu duệ của một thùng chứa anh chị em so với tất cả các inputs. Và bây giờ là lúc mà tất cả các bạn đang chờ đợi, JSFIDDLE ! Đến đó, chơi với nó, làm cho nó hoạt động cho bạn, tìm hiểu lý do tại sao nó hoạt động, phá vỡ nó, làm những gì bạn làm!
Hy vọng rằng tất cả có ý nghĩa và trả lời đầy đủ câu hỏi và có thể bất kỳ theo dõi nào có thể mọc lên.
<label for="rad1">Radio 1</label><input id="rad1" type="radio" name="rad">