antd-mobile/es/switch/style/index.css

基于 React 的移动设计规范实现

.hairline-remove-right-bottom {
  border-bottom: 0;
}
.hairline-remove-right-bottom:after {
  display: none;
}
.hairline-remove-right-bottom-bak:after {
  display: none;
}
.hairline-remove-left-top:before {
  display: none;
}
.am-switch {
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
}
.am-switch .checkbox {
  width: 102px;
  height: 62px;
  border-radius: 62px;
  box-sizing: border-box;
  background: #e5e5e5;
  z-index: 0;
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  cursor: pointer;
  position: relative;
  transition: all 300ms;
}
.am-switch .checkbox:before {
  content: ' ';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 96px;
  height: 56px;
  border-radius: 56px;
  box-sizing: border-box;
  background: #fff;
  z-index: 1;
  transition: all 200ms;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}
.am-switch .checkbox:after {
  content: ' ';
  height: 56px;
  width: 56px;
  border-radius: 56px;
  background: #fff;
  position: absolute;
  z-index: 2;
  left: 3px;
  top: 3px;
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
  transition: all 200ms;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.21);
}
.am-switch .checkbox.checkbox-disabled {
  z-index: 3;
}
.am-switch input[type="checkbox"] {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  border: 0 none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.am-switch input[type="checkbox"]:checked + .checkbox {
  background: #4dd865;
}
.am-switch input[type="checkbox"]:checked + .checkbox:before {
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
}
.am-switch input[type="checkbox"]:checked + .checkbox:after {
  -webkit-transform: translateX(40px);
      -ms-transform: translateX(40px);
          transform: translateX(40px);
}
.am-switch input[type="checkbox"]:disabled + .checkbox {
  opacity: 0.3;
}
.am-switch.am-switch-android .checkbox {
  width: 140px;
  height: 44px;
  border-radius: 6px;
  background: #a7aaa6;
}
.am-switch.am-switch-android .checkbox:before {
  display: none;
}
.am-switch.am-switch-android .checkbox:after {
  width: 67px;
  height: 38px;
  border-radius: 4px;
  box-shadow: none;
}
.am-switch.am-switch-android input[type="checkbox"]:checked + .checkbox {
  background: #108ee9;
}
.am-switch.am-switch-android input[type="checkbox"]:checked + .checkbox:before {
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
}
.am-switch.am-switch-android input[type="checkbox"]:checked + .checkbox:after {
  -webkit-transform: translateX(67px);
      -ms-transform: translateX(67px);
          transform: translateX(67px);
}