如何使带有选项卡的单选按钮在纯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>