Home > Article > Backend Development > 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 transitionhtml code##
<input class='switch-component' type='checkbox'>
// 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%; }
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!