zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    C++11 指针成员与拷贝构造(浅拷贝与深拷贝)
    C++11 委派构造函数
    C++11 继承构造函数
    C++11 局部和匿名类型作模板实参
    C++11 外部模板
    C++11 函数模板的默认模板参数
    2D游戏新手引导点光源和类迷雾实现
    UVA 12293
    【算法】8 图文搭配诠释三种链表及其哨兵
    小米面试
  • 原文地址:https://www.cnblogs.com/zhanghailing/p/12987151.html
Copyright © 2011-2022 走看看