移动切换开关上的文字On / Off

Question

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

我从another Stack Overflow post尝试了此代码。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我希望在文字左侧，关闭文字为右侧。 并且默认情况下是开关。 当切换按钮 时，小的白色圆形元素向右移动，空间如此之大。

任何帮助都会很棒

Answer 1

我认为您已经从其他网站上获取了上述代码段，因此，这很糟糕，因为您在不理解的情况下使用它。下面是你改变的工作片段。

说明： 我已将.on和.off个选择器添加到您的CSS中，并改变了定位，以正确设置ON和OFF文本。其次，我已将transform从55px更改为transform: translateX(28px);。您的默认圈子已退出该元素，因为transform大小超过了您的切换开关大小。

建议你在将代码插入系统之前理解代码（即使你复制它），所以在某些时候如果你遇到这样的问题，你就知道发生了什么。

＆＃13;

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;