单选框（复选框）按钮样式

最新推荐文章于 2022-08-20 14:37:02 发布

原创最新推荐文章于 2022-08-20 14:37:02 发布 · 1.1k 阅读

CC 4.0 BY-SA版权

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title> </title>
    <script src="js/jquery.min.js"></script>

    <style>
     input[type=checkbox] {visibility: hidden;  }
    .checkboxFive label {
          cursor: pointer;
          position: absolute;
          width: 25px;
          height: 25px;
          top: 0;
          left: 0;
          background: white;
          border:1px solid #ddd;
          border-radius: 50%;
    }
     .checkboxFive label:after {
         opacity: 0.2;
         content: '';
         position: absolute;
         width: 9px;
         height: 5px;
         background: transparent;
         top: 6px;
         left: 7px;
         border: 3px solid white;
         border-top: none;
         border-right: none;
         display: none;

         -webkit-transform: rotate(-45deg);
         -moz-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
         -ms-transform: rotate(-45deg);
         transform: rotate(-45deg);
     }

     .checkboxFive input[type=checkbox]:checked + label:after {
         display: block;
         opacity: 1;
     }

     .checkboxFive input[type=checkbox]:checked + label{
         background-color: #3fd1a5;
     }



    </style>
</head>
<body>
    <div class="checkboxFive">
        <input type="checkbox" value="1" id="checkboxFiveInput" name="" />
        <label for="checkboxFiveInput"></label>
    </div>
</body>
</html>