覆写checkbox默认样式 

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <!-- 设置网页 关键字为 :html,html5,web前端开发-->
        <meta name="keywords" content="html,html5,web前端开发" />
        <!-- 设置网页 描述 -->
        <meta name="description" content="html5是w3c推出的最新的html版本和规范">
        <style>
            form {
              border: 1px solid #ccc;
              padding: 20px;
              width: 300px;
              margin: 30px auto;
            }

            .wrapper {
              margin-bottom: 10px;
            }

            .box {
              display: inline-block;
              width: 20px;
              height: 20px;
              margin-right: 10px;
              position: relative;
              border: 2px solid orange;
              vertical-align: middle;
            }

            .box input {
              opacity: 0;
              position: absolute;
              top:0;
              left:0;
            }

            .box span {
              position: absolute;
              top: -10px;
              right: 3px;
              font-size: 30px;
              font-weight: bold;
              font-family: Arial;
              -webkit-transform: rotate(30deg);
              transform: rotate(30deg);
              color: orange;
            }

            input[type="checkbox"] + span {
              opacity: 0;
            }

            input[type="checkbox"]:checked + span {
              opacity: 1;
            }
        </style>
    </head>

    <body>
        <form action="#">
          <div class="wrapper">
            <div class="box">
              <input type="checkbox" checked="checked" id="usename" /><span>√</span>
            </div>
            <lable for="usename">我是选中状态</lable>
          </div>
          
          <div class="wrapper">
            <div class="box">
              <input type="checkbox"  id="usepwd" /><span>√</span>
            </div>
            <label for="usepwd">我是未选中状态</label>
          </div>
        </form> 
    </body>
</html>

效果：

posted on 2019-02-19 11:52  长孙同学  阅读(61)  评论(0)    收藏  举报

导航