手机端radio控件 ios效果

一、CSS代码如下：
    .switch {
      position: relative;
      margin: 20px auto;
      height: 26px;
      width: 120px;
      background: rgba(0, 0, 0, 0.25);
      border-radius: 3px;
      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), 0 1px rgba(255, 255, 255, 0.3);
      background: #444;
    }
    .switch-label {
      position: relative;
      z-index: 2;
      float: left;
      width: 58px;
      line-height: 26px;
      font-size: 11px;
      color:#888;
      text-align: center;
      text-shadow: 0 2px 1px rgba(0, 0, 0, 1);
      cursor: pointer;
    }
    .switch-label:hover {
      color:#fff;
    }
    .switch-input {
      display: none;
    }
    .switch-input:checked + .switch-label {
      font-weight: bold;
      color: rgba(0, 0, 0, 1);
      text-shadow: 0 1px 0px rgba(1, 1, 1, .1);
      transition: 0.15s ease-out;
    }
    .switch-input:checked + .switch-label-on ~ .switch-selection {
      left: 60px;
    }
    .switch-selection {
      display: block;
      position: absolute;
      z-index: 1;
      top: 2px;
      left: 2px;
      width: 58px;
      height: 22px;
      background:#888;
      border-radius: 3px;
      box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
      transition: left 0.15s ease-out;
    }

二、HTML代码如下：
    <div class="switch">
        <input type="radio" class="switch-input" name="radioname" value="0" id="off" checked>
        <label for="off" class="switch-label switch-label-off">OFF</label>
        <input type="radio" class="switch-input" name="radioname" value="1" id="on">
        <label for="on" class="switch-label switch-label-on">ON</label>
        <span class="switch-selection"></span>
    </div>

手机端radio控件 ios效果

原文：http://www.cnblogs.com/Copyrightcodetocompany/p/4677666.html