css美化checkbox实现男女性别开关切换效果代码-html代码-BFW代码库

css美化checkbox实现男女性别开关切换效果代码

代码语言：html

代码描述：css美化checkbox实现男女性别开关切换效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        body{
       background-color:#F5F5F5;
    }
    .switch{
       background-color:white;
       width:30vw;
       height:10vw;
       position:absolute;
       border-radius:30vw;
       border:1vw solid #ccc;
       cursor: pointer;
       user-select: none;
       display:inline-block;
       top:50%;
       left:50%;
       transform:translate(-50%, -50%);
    }
    .switch::before, .switch::after{
       content:'';
       width:10vw;
       height:10vw;
       background-color:white;
       position:absolute;
       border-radius:50%;
       top:-10%;
       left:-3%;
       transition: all 350ms cubic-bezier(0, 0.95, 0.38, 0.98), background 150ms ease;
       transform-origin: right center;
    
    }
    .switch::before{
       border:1vw solid lightblue;
    }
    .switch::after{
       background:#FBD3E1;
       border:1vw solid pink;
    }
    input:checked + .switch:before {
       background: #D3F0FB;
       transform: translateX(165%);
       border:1vw solid pink;
    }
    input + .switch .female{
       color:pink;
    }
    input:checked + .switch .male{
       color:lightblue;
    }
    input + .switch .male{
       color:#ccc;
    }
    input:checked + .switch .female{
      .........完整代码请登录后点击上方下载按钮下载查看