【本人原创,首发于CSDN播客,转载请注明网址,作者网名:九天翔龙】
做一个项目遇到了一个类似iphone的确认按钮效果,如图所示。
要求:
1、背景色能在两个颜色中切换
2、圆形还能左右移动
3、文字还能在“启用”和“停用”变换。
当时看到效果图的时候,第一反应解决方案是:
1、肯定要用input:checkbox,表示启动和停用两种状态
2、要用到JS来实现样式 和 文字内容的切换。等等,慢着.....这个项目JS用的地方比较多,懒得写了。反正不用考虑IE8了,为何不用CSS和HTML写个?
那么问题来了:
1、样式切换如何实现?
解决方案:可以用CSS中 checkbox的伪类 :checkbox 来表示选中状态,不写 :checkbox 就是未选中状态。
2、“启用”和“停用”文字变换怎么实现?
解决方案:写在两个标签中,一个隐藏,一个显示就可以了。
以上是整体思路,接下来动手写代码:
HTML代码:
<label class="app_checkbox">
<input type="checkbox" >
<span class="app_checkbox_qy">启用</span>
<span class="app_checkbox_ty">停用</span>
<em><i></i></em>
</label>
为了方便点击,我把 input:checkbox 和相关内容(启用,停用,以及图表标签等)放在了label里。
说明下 <em><i></i></em>: em 用来表示图标的 背景,i 来表示图标里的圈。
把input放在前面,是因为 CSS 中 可以通过 ~ 和 + 号来控制标签后面的 兄弟样式,但是没有办法控制标签前面的兄弟样式。为了样式和文字根据是否选中input:checkbox 来进行变化,我就把input:checkbox 写在了前面。
CSS(SCSS)代码如下:
.app_checkbox{
cursor: pointer;
display: inline-block; // 方便点击 label
font-size: 14px;
input[type=checkbox]{
display: none; // 隐藏input
&:checked~.app_checkbox_qy{ // 选中时:"启用" 显示
display: inline;
}
&:checked~.app_checkbox_ty{ // 选中时:"停用" 隐藏
display: none;
}
&:checked~em{ // 选中时:背景变绿
background: #44ca00;
}
&:checked~em>i{ // 选中时:圆圈靠右
margin-left: 22px;
}
}
.app_checkbox_qy,.app_checkbox_ty{
margin-right: 5px;
}
.app_checkbox_qy{ // 默认:"启用" 隐藏
display: none;
}
em{ // 默认:未选中状态
display: inline-block;
height: 22px;
width: 44px;
border-radius: 50px;
overflow: hidden;
vertical-align: middle;
background: #999999; // 默认:背景灰色
transition: 0.2s;
i{
display: inline-block;
width: 22px;
height: 22px;
border-radius: 50px;
float: left; // 默认:圆圈靠左
background: #ffffff;
transition: 0.2s;
}
}
}
搞定~!简直完美~!