css复选框在处于:checked状态时不应用更改

时间:2018-01-07 20:14:29

标签: html css checkbox

我正在尝试在选中收音机复选框时将一些隐藏文字带入视图。我无法解决为什么:检查标签后检查样式不适用。我认为我真的很愚蠢但只是无法解决正在发生的事情。

有人可以提供一些建议吗?

.wrap__wrapper {
  width: 400px;
  margin: 0 auto;
}

.wrap {
  position: relative;
  overflow: hidden;
}

.wrap__radio--input {
  display: none;
}

.wrap__inner {
  width: 300%;
  left: 0;
  transition: all 1s;
}

.wrap__slides {
  float: left;
  width: 33.333%;
}

.wrap__text {
  font-size: 16px;
  text-align: center;
}

.wrap__button {
  font-size: 1.8rem;
  cursor: pointer;
  text-align: center;
  display: block;
}

.wrap__radio--input:checked~.wrap__inner {
  transition: all 1s;
  background: red;
  left: -100%;
}
<div class="wrap__wrapper">
  <div class="wrap">
    <input type="radio" class="wrap__radio--input" id="slide--1">
    <label for="slide--1" class="wrap__button">next slide</label>
    <div class="wrap__inner">
      <div class="wrap__slides">
        <p class="wrap__text">slide1</p>
      </div>
      <div class="wrap__slides">
        <p class="wrap__text">slide2</p>
      </div>
    </div>
  </div>
</div>

2 个答案:

答案 0 :(得分:0)

您的元素必须为positionned,因此您必须在position上将relative属性设置为absolutefixed.wrap__inner能够使用左财产。您无法更新静态元素的位置。

.wrap__wrapper {
  width: 400px;
  margin: 0 auto;
}

.wrap {
  position: relative;
  overflow: hidden;
}

.wrap__radio--input {
  display: none;
}

.wrap__inner {
  position:relative;
  width: 300%;
  left: 0;
  transition: all 1s;
}

.wrap__slides {
  float: left;
  width: 33.333%;
}

.wrap__text {
  font-size: 16px;
  text-align: center;
}

.wrap__button {
  font-size: 1.8rem;
  cursor: pointer;
  text-align: center;
  display: block;
}

.wrap__radio--input:checked~.wrap__inner {
  transition: all 1s;
  background: red;
  left: -100%;
}
<div class="wrap__wrapper">
  <div class="wrap">
  <input type="radio" class="wrap__radio--input" id="slide--1"> 
  <label for="slide--1" class="wrap__button">next slide</label>   
    <div class="wrap__inner">
      <div class="wrap__slides">
        <p class="wrap__text">slide1</p>
      </div>
      <div class="wrap__slides">
        <p class="wrap__text">slide2</p>
      </div>
      <div class="wrap__slides">
        <p class="wrap__text">slide3</p>
      </div>
    </div>
  </div>
</div>

答案 1 :(得分:0)

您可以使用:before:after 伪元素切换 之前的下一步文本,将静态默认值position 属性应用于.wrap__inner div ,最重要的是将input type="radio"更改为input type="checkbox",以便切换 复选框状态:

&#13;
&#13;
.wrap__wrapper {
  width: 400px;
  margin: 0 auto;
}

.wrap {
  position: relative;
  overflow: hidden;
}

.wrap__radio--input {
  display: none;
}

.wrap__inner {
  position: relative; /* any value other than default */
  width: 300%;
  left: 0;
  transition: all 1s;
}

.wrap__slides {
  float: left;
  width: 33.333%;
}

.wrap__text {
  font-size: 16px;
  text-align: center;
}

.wrap__button {
  font-size: 1.8rem;
  cursor: pointer;
  text-align: center;
  display: block;
}

/* added */
.wrap__button:after {
  content: "next";
}

.wrap__radio--input:checked + .wrap__button:after {
  content: "previous";
}
/***/

.wrap__radio--input:checked ~ .wrap__inner {
  transition: all 1s;
  background: red;
  left: -100%;
}
&#13;
<div class="wrap__wrapper">
  <div class="wrap">
    <input type="checkbox" class="wrap__radio--input" id="slide--1">
    <label for="slide--1" class="wrap__button"></label>
    <div class="wrap__inner">
      <div class="wrap__slides">
        <p class="wrap__text">slide1</p>
      </div>
      <div class="wrap__slides">
        <p class="wrap__text">slide2</p>
      </div>
    </div>
  </div>
</div>
&#13;
&#13;
&#13;

注意:就像我在评论中写的那样,这只适用于两张幻灯片。