Use css3 to implement switch component switching

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:

css3 implementation of switch component switch

Detailed explanation of the use of switch in PHP

JS uses switch to determine the code sharing of ternary operation while and attribute operation

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