input radio,改装input单选框样式，单选框input修改默认样式

缺乏、安全感 2022-04-08 15:29 300阅读 0赞

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>CSS3实现自定义Checkbox动画DEMO演示</title>
    
        <link
          rel="stylesheet"
          href="css/style.css"
          media="screen"
          type="text/css"
        />
      </head>
    
      <body>
        <div class="container">
          <h2>Check it out!</h2>
          <input type="checkbox" id="cbtest" />
          <label for="cbtest" class="check-box"></label>
        </div>
      </body>
    </html>

CSS

/* Made by Jimmy Gillam */
    html,
    body {
      padding: 0;
      margin: 0;
      background-color: #667788;
      color: #efefef;
      font-family: 'Open Sans';
    }
    
    .container {
      box-sizing: border-box;
      padding: 25px;
      text-align: center;
    }
    .container h2 {
      margin-bottom: 40px;
    }
    
    /* Checkmark style starts */
    @-moz-keyframes dothabottomcheck {
      0% {
        height: 0;
      }
    
      100% {
        height: 50px;
      }
    }
    @-webkit-keyframes dothabottomcheck {
      0% {
        height: 0;
      }
    
      100% {
        height: 50px;
      }
    }
    @keyframes dothabottomcheck {
      0% {
        height: 0;
      }
    
      100% {
        height: 50px;
      }
    }
    @keyframes dothatopcheck {
      0% {
        height: 0;
      }
    
      50% {
        height: 0;
      }
    
      100% {
        height: 120px;
      }
    }
    @-webkit-keyframes dothatopcheck {
      0% {
        height: 0;
      }
    
      50% {
        height: 0;
      }
    
      100% {
        height: 120px;
      }
    }
    @-moz-keyframes dothatopcheck {
      0% {
        height: 0;
      }
    
      50% {
        height: 0;
      }
    
      100% {
        height: 120px;
      }
    }
    input[type='checkbox'] {
      display: none;
    }
    
    .check-box {
      height: 100px;
      width: 100px;
      background-color: transparent;
      border: 10px solid black;
      border-radius: 5px;
      position: relative;
      display: inline-block;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      -moz-transition: border-color ease 0.2s;
      -o-transition: border-color ease 0.2s;
      -webkit-transition: border-color ease 0.2s;
      transition: border-color ease 0.2s;
      cursor: pointer;
    }
    .check-box::before,
    .check-box::after {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      position: absolute;
      height: 0;
      width: 20px;
      background-color: #34b93d;
      display: inline-block;
      -moz-transform-origin: left top;
      -ms-transform-origin: left top;
      -o-transform-origin: left top;
      -webkit-transform-origin: left top;
      transform-origin: left top;
      border-radius: 5px;
      content: ' ';
      -webkit-transition: opacity ease 0.5;
      -moz-transition: opacity ease 0.5;
      transition: opacity ease 0.5;
    }
    .check-box::before {
      top: 72px;
      left: 41px;
      box-shadow: 0 0 0 5px #667788;
      -moz-transform: rotate(-135deg);
      -ms-transform: rotate(-135deg);
      -o-transform: rotate(-135deg);
      -webkit-transform: rotate(-135deg);
      transform: rotate(-135deg);
    }
    .check-box::after {
      top: 37px;
      left: 5px;
      -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
    }
    
    input[type='checkbox']:checked + .check-box,
    .check-box.checked {
      border-color: #34b93d;
    }
    input[type='checkbox']:checked + .check-box::after,
    .check-box.checked::after {
      height: 50px;
      -moz-animation: dothabottomcheck 0.2s ease 0s forwards;
      -o-animation: dothabottomcheck 0.2s ease 0s forwards;
      -webkit-animation: dothabottomcheck 0.2s ease 0s forwards;
      animation: dothabottomcheck 0.2s ease 0s forwards;
    }
    input[type='checkbox']:checked + .check-box::before,
    .check-box.checked::before {
      height: 120px;
      -moz-animation: dothatopcheck 0.4s ease 0s forwards;
      -o-animation: dothatopcheck 0.4s ease 0s forwards;
      -webkit-animation: dothatopcheck 0.4s ease 0s forwards;
      animation: dothatopcheck 0.4s ease 0s forwards;
    }

效果图 自己可以根据需要修改样式

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70]: /images/20220404/236d56bde3c147989b5a91701ab95652.png