如何调整切换按钮的大小？

Question

我有一个 HTML 页面，其切换按钮具有 CSS 但切换按钮的区域及其长度偏离初始位置。

当我按下切换键时，它会以不同的左边距移动，长度也会改变。

这是我所做的代码片段

.switch {
  position: relative;
  display: inline-block;
  width: 120px;
  height: 34px;
}

.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: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider {
  position: absolute;
  background-color: #2ab934;
  left: 31px;
}

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 ---------*/

.EMEA {
  display: none;
}

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

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

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


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


/* Rounded sliders */

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

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

<label class="switch">
  <input type="checkbox" id="togBtn">
  <div class="slider round">
   <!--ADDED HTML -->
    <span class="EMEA">EMEA</span>
    <span class="AMERICAS">AMERICAS</span>
    <!--END-->
  </div>
</label>

如何使 EMEA 切换与 AMERICAS 的长度相同且不改变其位置？

Answer 1

从 input:checked + .slider 中删除 left: 31px。
将 31px 添加到 transform: translateX(55px)，使其在 input:checked + .slider:before 中变为 transform: translateX(86px)。

更新工作示例：

.switch {
  position: relative;
  display: inline-block;
  width: 120px;
  height: 34px;
}

.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: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

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

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

input:checked + .slider:before {
  transform: translateX(86px);
}

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

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

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

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

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

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

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

<label class="switch">
  <input type="checkbox" id="togBtn">
  <div class="slider round">
    <span class="EMEA">EMEA</span>
    <span class="AMERICAS">AMERICAS</span>
  </div>
</label>

如何调整切换按钮的大小？

How to resize toggle button?

html

css

animation

toggle

css-transitions