最常用的手写switch标签

	Switch 按钮存在很多的UI框架,但是要是为了维护原本的WEB前端框架,可以手写对应的Switch标签,并产生对应的效果。
	下面这个是百度提供的一个可用的Switch对应的样式,通过JS可以来修改对应的内容,并且让其显示与后台数据结合起来

关闭状态开启状态
它对应的html是:

一个单选框,一个label,并且label绑定了单选框,点击label的时候,单选框也相应的点击了或者是取消点击

.slideThree {
   
    display: inline-block;
    width: 80px;
    height: 26px;
    background: #333;
    margin: 20px 10px;
    position: relative;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
    -webkit-box-shadow: inset 0px 1px 1px 

你可能感兴趣的:(前端)