页面CSS上的多个切换开关

时间：2016-05-16 22:28:57

标签： html css css3 toggle

我正在尝试在一个页面上重新创建多个toggle开关，但是当我创建一个新的开关时，它不起作用，它控制我创建的第一个开关。我正在尝试的toggle开关就像iPhone上的开关一样。这是fiddle 

.switch {
  font: 16px"adiHaus-Bold", Arial, sans-serif;
  text-transform: uppercase;
  position: relative;
  border-top: #CCC solid 1px;
  border-bottom: #EEE solid 1px;
  border-right: #ddd solid 1px;
  border-left: #ddd solid 1px;
  border-radius: 2px;
  height: 40px;
  width: 130px;
  margin: .2em;
  @include border-radius(3px);
  @include background-clip(padding-box);
  background-color: #EFEFEF;
  @include background-image(linear-gradient(bottom, rgba(255, 255, 255, .07) 0%, rgba(0, 0, 0, .07) 100%));
}
.switch-label {
  position: relative;
  z-index: 2;
  float: left;
  width: 63px;
  line-height: 42px;
  font-size: 16px;
  letter-spacing: 0;
  color: #CDCDCD;
  text-align: center;
  cursor: pointer;
}
.switch-label-off {
  text-shadow: 0px 1px 0px #FFFFFF;
}
.switch-label-on {
  text-shadow: 0px 1px 0px #FFFFFF;
}
.switch-input {
  display: none;
}
.switch-input:checked + .switch-label {
  color: #000;
  font-weight: bold;
  -webkit-transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -moz-transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -ms-transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -o-transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
  transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -moz-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -ms-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -o-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
  transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
}
.switch-input:checked + .switch-label-on ~ .switch-selection {
  left: 65px;
}
.switch-selection {
  display: block;
  position: absolute;
  z-index: 1;
  top: 0px;
  left: 0px;
  width: 63px;
  height: 38px;
  @include border-radius(2px);
  @include background-clip(padding-box);
  background-color: #ffffff;
  -webkit-transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -moz-transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -ms-transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -o-transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
  transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -moz-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -ms-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -o-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
  transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
}
label,
.form-label-text {
  display: inline-block;
  margin-right: 0 !important;
  vertical-align: middle;
}
<span class="form-title">Hand:</span>
<div class="switch">
  <input type="radio" class="switch-input" name="view" value="one" id="one" checked>
  <label for="one" class="switch-label switch-label-off">L</label>
  <input type="radio" class="switch-input" name="view" value="two" id="two">
  <label for="two" class="switch-label switch-label-on">R</label>
  <span class="switch-selection"></span>
</div>

1 个答案:

答案 0 :(得分：1)

因为您要为两者应用相同的类，所以当您使用:checked时，它将只滑动第一个。

为每个input

分配ID

注意

您错过了结束div

＆＃13;
＆＃13; 
.switch {
  font: 16px"adiHaus-Bold", Arial, sans-serif;
  text-transform: uppercase;
  position: relative;
  border-top: #CCC solid 1px;
  border-bottom: #EEE solid 1px;
  border-right: #ddd solid 1px;
  border-left: #ddd solid 1px;
  border-radius: 2px;
  height: 40px;
  width: 130px;
  margin: .2em;
  border-radius:3px;
  background-clip:padding-box;
  background-color: #EFEFEF;
  background-image:linear-gradient(bottom, rgba(255, 255, 255, .07) 0%, rgba(0, 0, 0, .07) 100%);
}
.switch-label {
  position: relative;
  z-index: 2;
  float: left;
  width: 63px;
  line-height: 42px;
  font-size: 16px;
  letter-spacing: 0;
  color: #CDCDCD;
  text-align: center;
  cursor: pointer;
}
.switch-label-off {
  text-shadow: 0px 1px 0px #FFFFFF;
}
.switch-label-on {
  text-shadow: 0px 1px 0px #FFFFFF;
}
.switch-input {
  display: none;
}
#one:checked + .switch-label,
#three:checked + .switch-label {
  color: #000;
  font-weight: bold;
  -webkit-transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -moz-transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -ms-transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -o-transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
  transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -moz-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -ms-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -o-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
  transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
}
#one ~.switch-input:checked + .switch-label-on ~ .switch-selection,
#three ~.switch-input:checked + .switch-label-on ~ .switch-selection {
  left: 65px;
}
.switch-selection {
  display: block;
  position: absolute;
  z-index: 1;
  top: 0px;
  left: 0px;
  width: 63px;
  height: 38px;
  border-radius:2px;
  background-clip:padding-box;
  background-color: #ffffff;
  -webkit-transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -moz-transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -ms-transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -o-transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
  transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -moz-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -ms-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -o-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
  transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
}
label,
.form-label-text {
  display: inline-block;
  margin-right: 0 !important;
  vertical-align: middle;
}
＆＃13; 
<span class="form-title">Hand:</span>
<div class="switch">
  <input type="radio" class="switch-input" name="view" value="one" id="one" checked>
  <label for="one" class="switch-label switch-label-off">L</label>
  <input type="radio" class="switch-input" name="view" value="two" id="two">
  <label for="two" class="switch-label switch-label-on">R</label>
  <span class="switch-selection"></span>
</div>
<hr />

<span class="form-title">Hand:</span>
<div class="switch">
  <input type="radio" class="switch-input" name="view" value="three" id="three" checked>
  <label for="three" class="switch-label switch-label-off">L</label>
  <input type="radio" class="switch-input" name="view" value="four" id="four">
  <label for="four" class="switch-label switch-label-on">R</label>
  <span class="switch-selection"></span>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题