使用 css 样式输入单选答案

【问题标题】：Style input radio with css使用 css 样式输入单选
【发布时间】：2021-01-14 15:22:55
【问题描述】：

我遇到了无线电输入 css 的问题。滑块背景不在标签下方。

我尝试使用 z-index，但它不起作用。在此处输入代码


<div class="toggle_radio">
  <input type="radio" class="toggle_option" id="first_toggle" name="toggle_option">
  <input type="radio" class="toggle_option" id="second_toggle" name="toggle_option">
  <label for="first_toggle">first</label>
  <label for="second_toggle">second</label>
  <div class="toggle_option_slider"></div>
</div>

https://codepen.io/maytad/pen/KKzYRWE

【问题讨论】：

标签： html css input sass styles

【解决方案1】：

.toggle_radio 标签位置：相对和 z-index

.toggle_radio label {
  opacity: 0.99;
  font-size: 20px;
  display: block;
  width: 115px;
  height: 32px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  position: relative; // new
  z-index: 5; // new
}

https://codepen.io/zhishaofei3/pen/VwaNRRa

【讨论】：

【解决方案2】：

希望这能解决您的问题:)

.toggle_radio {
  position: relative;
  background: #ebebeb;
  color: #000000;
  z-index: 2;
  padding: 0 !important;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  position: relative;
  height: 32px;
  width: 231px;
}
.toggle_radio > * {
  float: left;
}
.toggle_radio input[type="radio"] {
  display: none;
}
.toggle_radio label {
  opacity: 0.99;
  font-size: 20px;
  width: 115px;
  height: 32px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
}
.toggle_option_slider {
  z-index: -1;

  background: #ffffff;
  width: 115px;
  height: 26px;
  position: absolute;
  top: 3px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
#first_toggle:checked ~ .toggle_option_slider {
  left: 3px;
  z-index: -4;
}
#second_toggle:checked ~ .toggle_option_slider {
  left: 113px;
  z-index: -4;
}

<div class="toggle_radio">
  <input type="radio" class="toggle_option" id="first_toggle" name="toggle_option" value="0">
  <input type="radio" class="toggle_option" id="second_toggle" name="toggle_option" value="1">
  <label for="first_toggle">first</label>
  <label for="second_toggle">second</label>
  <div class="toggle_option_slider"></div>
</div>

【讨论】：