Question

我的无线电输入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

Answer 1

希望这可以解决您的问题：）

.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>

Answer 2

.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

使用CSS的样式输入收音机

2 个答案: