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类中增加宽度时，宽度只会增加，但是当我进行切换时，切换保持在中间，即E不会移动到最末端。我需要如何将拨动开关移到最末端。

Answer 1

这是选中复选框将滑块向右移动时应用的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);
}

Answer 2

您可以使用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>

Answer 3

您只需要增加传递给transformX()中的input:checked + .slider:before函数调用的内容。您必须添加与要添加到宽度中的像素数量完全相同的像素

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

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

如何增加拨动开关的宽度

3 个答案: