纯HTML+CSS写的模拟iphone的确认按钮

【本人原创，首发于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;
    }
  }
}

搞定~！简直完美~！

纯HTML+CSS写的模拟iphone的确认按钮

猜你喜欢