切换按钮使用纯 css

Question

我有一个切换按钮，我正在尝试使用复选框和纯 CSS。 我试图得到的最终结果是这样的 https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_switch

但是在从不同的来源尝试它时，我最终做了这样的事情

http://jsfiddle.net/8wb570ma/34/

.slide-btn-alt .slide-btn-content .slide-btn-handle {
  position: static;
  width: 50%;
  border-radius: 0;
  background: none;
  text-align: center;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}

我面临的问题是我无法翻译方向， 我在 w3schools 上检查的内容显示打开/选中左侧的文本和右侧的滑块，而关闭/取消选中右侧的文本和左侧的滑块。而我最终做出的结果却表现出完全相反的行为。

这是因为我的按钮像吗？

关||手柄||开

Answer 1

如果我正确理解您想要什么，那么您可以使用 W3Schools 方法的轻微变体。

为了展示正在发生的事情，这里是一个基本版本，对原始版本的改动很小：

.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: attr(data-off);
  line-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 {
  content: attr(data-on);
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

<label class="switch">
  <input type="checkbox">
  <span class="slider" data-off="Off" data-on="On"></span>
</label>

再加上一些 CSS 让它看起来更像你的例子：

.slide-btn-alt {
  position: relative;
  display: inline-block;
  width: 108px;
  height: 34px;
}

.slide-btn-alt input {display:none;}

.slide-btn-content {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #2b99d6;
  text-transform:uppercase;
  -webkit-transition: .3s;
  transition: .3s;
}

.slide-btn-content::before {
  position: absolute;
  content: attr(data-off);
  font: 900 10px/34px 'Montserrat-Bold', sans-serif;
  color: white;
  width: 50%;
  left: 0;
  bottom: 0;
  text-align: center;
  -webkit-transition: .3s;
  transition: .3s;
}

.slide-btn-content::after {
  position: absolute; content: '';
  height: 34px;
  left: 49%;
  bottom: 0;
  border-left: 2px solid rgba(238, 238, 239, 0.2);
}

input:checked + .slide-btn-content {
  background-color: #485679;
}

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

input:checked + .slide-btn-content::before {
  content: attr(data-on);
  -webkit-transform: translateX(54px);
  -ms-transform: translateX(54px);
  transform: translateX(54px);
}

<label class="slide-btn-alt">
  <input type="checkbox">
  <span class="slide-btn-content" data-off="Off" data-on="On"></span>
</label>

Answer 2

如果您对 W3 中包含更多样式和移动部件的圆形示例感兴趣。我正在为此做一个演示，以便今天再次销售订阅。

* {
  font-family: sans-serif;
}

.vert {
  display: table;
  height: 100vh;
  width: 100%;
}

.sr_align {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.sr_checkbox label {
  cursor: pointer;
  display: inline-block;
  padding-left: 44px;
  position: relative;
  font-size: 14px;
}

.sr_checkbox label input {
  display: none !important;
}

.sr_checkbox label .sr_element_two:before {
  content: "Pay";
  color: white;
  display: block;
  position: absolute;
  font-size: 36px;
  z-index: 2;
  top: 25px;
  left: 145px !important;
}

.sr_checkbox label input[type="checkbox"]:checked+.sr_element .sr_element_two:before {
  content: "Ok";
  color: black;
  display: block;
  position: absolute;
  font-size: 36px;
  z-index: 2;
  top: 25px;
  left: 80px !important;
  transition: 0.1s;
}

.sr_checkbox label .sr_element:after {
  content: "";
  width: 70px;
  height: 70px;
  border-radius: 100%;
  background: white;
  display: block;
  padding: 0;
  margin: 3px;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.15);
  -webkit-transition: -webkit-transform;
  transition: -webkit-transform;
  transition: transform;
  transition: transform, -webkit-transform;
  -webkit-transition-duration: 0.25s;
  transition-duration: 0.25s;
  -webkit-transition-timing-function: cubic-bezier(0.23, 1.94, 0.38, 0.74);
  transition-timing-function: cubic-bezier(0.23, 1.94, 0.38, 0.74);
  position: relative;
  top: 7px;
  left: 10px;
}

.sr_checkbox label .sr_element:before {
  content: "$7";
  display: block;
  position: absolute;
  font-size: 36px;
  z-index: 1;
  top: 25px;
  left: 73px;
  color: #60f !important;
}

.sr_checkbox label .sr_element {
  display: inline-block;
  border-width: 0;
  padding: 0;
  font-size: 0;
  min-width: 188px;
  height: 91px;
  border-radius: 80px;
  background: #60f;
  vertical-align: bottom;
  margin-right: 10px;
  -webkit-transition: background;
  transition: background;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  box-shadow: 0 20px 20px #6600ff25, inset 0 20px 20px #6600ff15;
}

.sr_checkbox label input[type="checkbox"]:checked+.sr_element:after {
  -webkit-transform: translateX(91px);
  transform: translateX(91px);
  transition: 0.1s;
}

.sr_checkbox label input[type="checkbox"]:checked+.sr_element:before {
  content: "L";
  transform: rotate(40deg) scaleX(-1);
  right: -51px;
  top: 13px;
  color: #60f !important;
  font-size: 47px;
}

.sr_checkbox label input[type="checkbox"]:checked+.sr_element {
  background: #0f9;
  box-shadow: 0 20px 20px #00ff9925, inset 0 20px 20px #00000015;
}

.sr_checkbox {
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

<div class="vert">
  <div class="sr_align">
    <div class="sr_checkbox">
      <label>
    <input type="checkbox" class="sr_acceptance" name="acceptance" value="Y" required="">
    <span class="sr_element"><span class="sr_element_two"></span></span>
  </label>
    </div>
  </div>
</div>