如何增加切换开关的宽度？

Question

我该如何使用简单的CSS代码增大切换开关的尺寸？以下是HTML和CSS中的代码：

。

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}
.switch input {display:none;}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -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 {
  background-color: #2196F3;
}
input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

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

<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>

当我增加.switch类中的宽度时，只有宽度增加，但切换仍保持在中间。当我在I.E中进行切换时，它不会移动到极端位置。我需要如何将切换开关移动到极端位置。

注：该段文字为技术相关内容，翻译仅供参考，具体操作请以实际情况为准。

- ashokkumarn12

Answer 1

您可以使用left而不是translateX来更改滑块的位置，这将允许您更改开关的宽度而不影响滑块的行为。

.switch {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 34px;
}
.switch input {display:none;}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -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 {
  background-color: #2196F3;
}
input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before { 
  /* 30px = 26px (slider's width) + 4px (for the margin) */
  left: calc(100% - 30px);
}

<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>

- Chiller

Answer 2

你只需要在input:checked + .slider:before中传递给transformX()函数调用的参数增加即可。你必须添加与你想要增加的宽度完全相同的像素数。

在下面的示例中，我将切换开关大小增加了30像素-请参见下面代码中的注释。

.switch {
  position: relative;
  display: inline-block;
  width: 90px; /* Added 30px here */
  height: 34px;
}
.switch input {display:none;}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -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 {
  background-color: #2196F3;
}
input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(56px); /* Added 30px here... */
  -ms-transform: translateX(56px); /* ... here... */
  transform: translateX(56px); /* ...and here too! ;) */
}

<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>

- mr.mams

Answer 3

当复选框被选中时应用的CSS，将滑块移动到右侧：

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

我为Mozilla和Opera添加了-moz-和-o-前缀。

在增加宽度后，您需要根据您的规格进行更改。

这是一个更宽的宽度和右侧滑块的演示： http://jsfiddle.net/v8gz2xr5/3/

HTML（原样）：

<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>

CSS：

.switch {
  position: relative;
  display: inline-block;
  width: 200px; /* width increased */
  height: 34px;
}
.switch input {display:none;}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -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 {
  background-color: #2196F3;
}
input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(160px); /* Move the slider to the right */
  -ms-transform: translateX(160px);
  -moz-transform: translateX(160px);
  -o-transform: translateX(160px);
  transform: translateX(160px);
}

- user10040839