css3 implements switch component switch

This article mainly introduces to you the relevant information on how to use css3 to implement the switch component. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Form-based checkbox

Rendering

##Principle

checkbox, has two states, unchecked and selected. When checked (:checked), just change the style. First, you must clear the browser's default style, apperance: none. The code in this article only runs in chrome. If You need to write compatibility code, just add prefixes to appearance and transition

html code

##

<input class=&#39;switch-component&#39; type=&#39;checkbox&#39;>

css code

// switch组件
.switch-component {
  position: relative;
  width: 60px;
  height: 30px;
  background-color: #dadada;
  border-radius: 30px;
  border: none;
  outline: none;
  -webkit-appearance: none;
  transition: all .2s ease;
}

// 按钮
switch-component::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: #fff;
  border-radius: 50%;
  transition: all .2s ease;
 }

// checked状态时，背景颜色改变
.switch-component:checked {
  background-color: #86c0fa;
}

// checked状态时，按钮位置改变
.switch-component:checked::after {
  left: 50%;
 }

Related recommendations:

Detailed introduction to the switch component of the WeChat applet

The above is the detailed content of css3 implements switch component switch. For more information, please follow other related articles on the PHP Chinese website!