input重置样式

重置单选和多选按钮的样式,是自己用过的,在次记录

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html5上传</title>
    <style>
        input[type="radio"],input[type="checkbox"] {
          display: inline-block;
           0.35rem;
          height: 0.35rem;
          cursor: pointer;
          background: #fff;
          font-size: 0.27rem;
          text-align: center;
          -webkit-appearance: none;
          border: 0.03rem solid #b1b1b1;
          vertical-align: middle;
          margin-top: -2px;
          margin-bottom: 1px;
          position: relative;
        }
        input[type="radio"] + label,
        input[type="checkbox"] + label {
          font-size: 0.28rem;
          line-height: 0.35rem;
          color: #6b6b6b;
          padding-left: 0.2rem;
        }
        input[type="radio"] {
          border-radius: 50%;
        }
        input[type="radio"]:checked,
        input[type="checkbox"]:checked {
          background: #00b0f4;
          border: 0px solid #c9c9c9;
        }
        input[type="radio"]:checked:before,
        input[type="radio"]:after,
        input[type="checkbox"]:checked:before,
        input[type="checkbox"]:checked:after {
          content: "";
          pointer-events: none;
          position: absolute;
          color: white;
          border: 0.02rem solid;
          background-color: white;
        }
        input[type="radio"]:checked:before,
        input[type="checkbox"]:checked:before {
           0.04rem;
          height: 0.02rem;
          left: 20%;
          top: 48%;
          transform: skew(0deg, 50deg);
        }
        input[type="radio"]:checked:after,
        input[type="checkbox"]:checked:checked:after {
           0.1rem;
          height: 0.02rem;
          left: 40%;
          top: 42%;
          transform: skew(0deg, -50deg);
        }
    </style>
</head>
<body>
    <div class="one">
        <input type="radio"/>
        <input type="checkbox"/>
        <input type="radio" />
        <input type="checkbox" />
    </div>
    </script>
</body>
</html>

原文地址:https://www.cnblogs.com/zhanghailing/p/12987151.html