html - 在切换开关开/关上移动文本

Question

我有一个拨动开关。我希望它的尺寸​​小一些。

我试过这段代码，来自 another Stack Overflow post .

  .switch {
  position: relative;
  display: inline-block;
  width: 45px;
  height: 17px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ca2222;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 13px;
  width: 13px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2ab934;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(55px);
  -ms-transform: translateX(55px);
  transform: translateX(55px);
}

/*------ ADDED CSS ---------*/
.on
{
  display: none;
}

.on, .off
{
  color: white;
  position: absolute;
  transform: translate(-50%,-50%);
  top: 25%;
  left: 25%;
  font-size: 10px;
  font-family: Verdana, sans-serif;
}

input:checked+ .slider .on
{display: block;}

input:checked + .slider .off
{display: none;}

/*--------- END --------*/

/* Rounded sliders */
.slider.round {
  border-radius: 17px;
}

.slider.round:before {
  border-radius: 50%;}
    } // community_table_main_section
  }
}

<label class="switch"><input type="checkbox" id="togBtn"><div class="slider round"><span class="on">ON</span><span class="off">OFF</span>

我希望 on 文本在左侧，off 文本在右侧。和默认开关。当切换按钮 on 时，白色的小圆形元素会向右侧移动，空间很大。

任何帮助都会很棒

Answer 1

我认为您是从其他网站上摘录的上述代码片段，因此，这很糟糕，因为您在不理解的情况下使用它。以下是您修改后的工作片段。

解释:我已将 .on 和 .off 选择器添加到您的 CSS 中并更改了定位，以正确设置您的 ON 和 OFF 文本。其次，我将 transform 从 55px 更改为 transform: translateX(28px);。由于 transform 大小超过了切换开关的大小，您的默认圆圈超出了元素范围。

建议您在将代码插入系统之前先了解代码(即使您复制它)，这样在某些时候如果您遇到这样的问题，您就会知道发生了什么。

.switch {
  position: relative;
  display: inline-block;
  width: 45px;
  height: 17px;
}

.switch input {
  display: none;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ca2222;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 13px;
  width: 13px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2ab934;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(28px);
  -ms-transform: translateX(28px);
  transform: translateX(28px);
}


/*------ ADDED CSS ---------*/

.on {
  display: none;
}

.on,
.off {
  color: white;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 25%;
  left: 25%;
  font-size: 10px;
  font-family: Verdana, sans-serif;
}

.on {
  top: 8px;
}

.off {
  left: auto;
  right: -5px;
  top: 8px;
}

input:checked+ .slider .on {
  display: block;
}

input:checked + .slider .off {
  display: none;
}


/*--------- END --------*/


/* Rounded sliders */

.slider.round {
  border-radius: 17px;
}

.slider.round:before {
  border-radius: 50%;
}

<label class="switch">
  <input type="checkbox" id="togBtn">
  <div class="slider round">
    <span class="on">ON</span>
    <span class="off">OFF</span>
  </div>
</label>