效果圖如下：

很簡單的HTML結構

<!-- 仿ios的switch開關 -->
    <label for=""><input type="checkbox" name="" id="" class="a-switch"></label>

CSS部分：

主要用到了：
點選label會觸發點選所包含的input控制元件，利用處理label的樣式來實現

<style>
        .a-switch{
            width: 60px;
            height: 30px;
            border-radius
 
: 20px;
            -webkit-appearance: none;
            user-select: none;
            outline: none; 
            background-color: #e0e0e0;
            box-shadow: #c2c2c2 0 0 0 0 inset;
            position: relative;
            transition:0.4s;
        }
        .a-switch:before{
            content: ''
 
;
            width: 28px;
            height: 28px;
            border-radius: 100%;
            background-color: #fff;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); 
            position: absolute;
            left:0;
            top:1px;
            transition:0.3s;
        }
        .a-switch:checked
 
{
            border-color: #81d480;
            box-shadow: #83e482 0 0 0 14px inset;
            background-color: #81d480; 
        }
        .a-switch:checked:before{
            left:32px;
        }
  </style>