如何使带有选项卡的单选按钮在纯 CSS 中工作？

Question

我正在处理单击后显示每个选项的单选按钮。例如，如果我单击“按位置”，我想显示一个带有我输入字段的字段的选项卡，如果单击“按过程”，它会显示一个具有不同字段的不同选项卡。

但是，我还想让它具有响应性，并且在移动版本中，单选按钮堆叠在一起，居中居中，但文本左对齐。

这是我在代码中所做的：

.steps-box {
  margin-top: 60px;
  background-color: white;
  border-radius: 5px;
  padding: 30px 30px;
  text-align: center; }

.steps-box h2 {
  color: #002c4a; }

.steps-box2 {
  background-color: white;
  border-radius: 5px;
  padding: 30px 30px; }

/*Schedule Options on Step #1 */
.schedule_options {
  position: relative;
  width: 90%;
  margin: 0 auto;
  padding: 35px 0;
  z-index: 10; }

.schedule_tabs {
  width: 100%;
  margin: 0 auto; }

.schedule_options input[type="radio"] {
  position: absolute;
  opacity: 0;
  z-index: -1; }

.schedule_options label {
  position: relative;
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 10px;
  padding-left: 33px;
  padding-right: 10px;
  line-height: 36px;
  cursor: pointer;
  color: #51a5ba; }

.schedule_options label i {
  display: none; }

.schedule_options label::before {
  content: " ";
  position: absolute;
  top: 4px;
  left: 0;
  display: block;
  width: 24px;
  height: 24px;
  border: 2px solid #51a5ba;
  border-radius: 4px;
  z-index: -1; }

.schedule_options input[type="radio"] + label::before {
  border-radius: 5px; }

/* Checked */
.schedule_options input[type="radio"]:checked + label {
  padding-left: 10px;
  padding-right: 15px;
  color: #fff; }

.schedule_options input[type="radio"]:checked + label i {
  display: inline-block;
  padding-right: 10px; }

.schedule_options input[type="radio"]:checked + label::before {
  top: 0;
  width: 100%;
  height: 100%;
  background: #51a5ba; }

/* Transition */
.schedule_options label,
.schedule_options label::before {
  -webkit-transition: .25s all ease;
  -o-transition: .25s all ease;
  transition: .25s all ease; }

.schedule_options section {
  display: none;
  padding: 20px 0 0; }

.schedule_tabs #rb1:checked ~ .schedule_options #content1,
.schedule_tabs #rb2:checked ~ .schedule_options #content2,
.schedule_tabs #rb3:checked ~ .schedule_options #content3 {
  display: block; }
  
 @media screen and (max-width: 480px) {
  
  .schedule_options {
    text-align: left; }

  .schedule_tabs {
    width: 170px;
    margin: 0 auto; } }

<section>
<div class="container">
<div class="steps-box">
<h2>How do you want to schedule your appointment?</h2>
<div class="schedule_options">
<div class="schedule_tabs">
  <input type="radio" name="rb" id="rb1">
  <label for="rb1"><i class="fas fa-check"></i>By Location</label>
  <input type="radio" name="rb" id="rb2">
  <label for="rb2"><i class="fas fa-check"></i>By Availability</label>
  <input type="radio" name="rb" id="rb3">
  <label for="rb3"><i class="fas fa-check"></i>By Procedure</label>
</div>
                    
<section id="content1">
   <p>Content 1</p>
</section>
<section id="content2">
   <p>Content 2</p>
</section>
   <section id="content3">
<p>Content 3</p>
</section>
</div>
</div>
</div>
</section>

如您所见，没有<div class="schedule_tabs">，我可以轻松显示每个选项卡的内容。有了这个<div class="schedule_tabs">，我可以将移动版本中的单选按钮居中，但每个选项卡中的内容都不会显示。

我该如何解决？

Answer 1

发生这种情况是因为添加 <div class="schedule_tabs"> 意味着 inputs 和 labels 不再是兄弟姐妹。

取自Mozilla Developer Network：

~ 组合器选择兄弟姐妹。这意味着第二个元素在第一个元素之后（尽管不一定立即），并且都共享同一个父元素。 语法：A ~ B 示例：p ~ span 将匹配 <p> 之后的所有元素。

您唯一的其他选项是+，它只选择相邻的兄弟姐妹，>，它只选择一个直接的孩子，（空格），它选择所有的孩子。

因此，这在纯 CSS 中似乎是不可能的。尽管使用这种 DOM 操作，我强烈建议使用非常基本的 JavaScript。

Answer 2

我刚刚完成了重新格式化我的代码。这是我更新的有效代码

.schedule_options {
    position: relative;
    width: 99%;
    margin: 0 auto;
    padding: 35px 0;
    z-index: 10;
}
.schedule_options input[type="radio"] {
    position: absolute;
    opacity: 0;
    z-index: -1;
}
.schedule_options label {
    position: relative;
    display: inline-block;
    padding-left: 33px;
    /*padding-right: 10px;*/
    line-height: 36px;
    cursor: pointer;
    color: $teal;
    text-align: left;
    width: /*160px*/ 160px;
    margin: 0 auto 10px;
}
.schedule_options label i {
    display: none;
}
.schedule_options label::before {
  content: " ";
  position: absolute;
  top: 4px;
  left: 0;
  display: block;
  width: 24px;
  height: 24px;
  border: 2px solid $teal;
  border-radius: 4px;
  z-index: -1;
}
.schedule_options input[type="radio"] + label::before {
  border-radius: 5px;
}
/* Checked */
.schedule_options input[type="radio"]:checked + label {
    color: #fff;
}
.schedule_options input[type="radio"]:checked + label i {
    display: block;
    position: absolute;
    width: 24px;
    height: 24px;
    top: 10px;
    left: 8px;
}
.schedule_options input[type="radio"]:checked + label::before {
    top: 0;
    width: /*100%*/ 160px;
    height: 100%;
    background: #51a5ba;
}
/* Transition */
.schedule_options label, .schedule_options label::before {
  -webkit-transition: .25s all;
  -o-transition: .25s all;
  transition: .25s all;
}
.schedule_options section {
  display: none;
  padding: 20px 0 0;
}
.schedule_panels {
  
}
#rb1:checked ~ .schedule_panels #content1,
#rb2:checked ~ .schedule_panels #content2,
#rb3:checked ~ .schedule_panels #content3 {
  display: block;
}
@media screen and (max-width: 768px) {
.schedule_options {
    display: flex;
    flex-direction: column;
}
}

<div class="schedule_options">
                    
                    <input type="radio" name="rb" id="rb1" />
                    <label for="rb1"><i class="fas fa-check"></i>By Location</label>
                    <input type="radio" name="rb" id="rb2" />
                    <label for="rb2"><i class="fas fa-check"></i>By Availability</label>
                    <input type="radio" name="rb" id="rb3" />
                    <label for="rb3"><i class="fas fa-check"></i>By Procedure</label>
                    
                    <div class="schedule_panels">
                        <section id="content1">
                            <p>Content 1</p>
                        </section>
                        <section id="content2">
                            <p>Content 2</p>
                        </section>
                        <section id="content3">
                            <p>Content 3</p>
                        </section>
                    </div>
                </div>