zoukankan      html  css  js  c++  java
  • 单选框和复选框的样式修改

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <title>html</title>
      </head>
      <style>
        /* 单选框样式 */
        .radio input {
          display: none;
        }
        .radio label:active {
          color: #000;
        }
        .radio label {
           100%;
          height: 100%;
          display: inline-block;
          position: relative;
          line-height: 50px;
          color: #999;
          padding-left: 50px;
        }
        .radio label:after {
          content: ""; /*必须设置*/
          display: inline-block;
           20px;
          height: 20px;
          border: 1px solid green;
          position: absolute;
          top: 15px;
          left: 15px;
          border-radius: 20px;
        }
        .radio input:checked + label:after {
          background-color: green;
        }
    
        /* 多选框的样式 */
        .checkbox input {
          display: none;
        }
        .checkbox label {
           100%;
          height: 50px;
          display: inline-block;
          line-height: 50px;
          position: relative;
          padding-left: 50px;
        }
        .checkbox label:active {
          background: #eeeeee;
        }
        .checkbox label:after {
          content: "";
           20px;
          height: 20px;
          border: 1px solid green;
          display: inline-block;
          position: absolute;
          top: 15px;
          left: 15px;
        }
        .checkbox input:checked + label:before {
          content: "2713";
          height: 20px;
          position: absolute;
          top: 0;
          left: 20px;
        }
      </style>
      <body>
        <h1>2018 09 16</h1>
    
        <div class="radio">
          性别: <input type="radio" name="sex" checked id="man" />
          <label for="man">男</label> <input type="radio" name="sex" id="lady" />
          <label for="lady">女</label>
        </div>
    
        <div class="checkbox">
          爱好: <input type="checkbox" id="read" /> <label for="read">读书</label>
          <input type="checkbox" id="swiming" /> <label for="swiming">读书</label>
          <input type="checkbox" id="basketball" />
          <label for="basketball">读书</label>
        </div>
      </body>
    </html>
  • 相关阅读:
    [HDU 3038] How Many Answers Are Wrong
    [BZOJ 4977][Lydsy1708月赛]跳伞求生
    [BZOJ4974] 字符串大师
    总结-exCRT
    [luogu 4777] exCRT
    [AHOI 2009] 中国象棋
    JavaScript MVC框架PK:Angular、Backbone、CanJS与Ember
    十一黄金周 加班加点随笔
    从两个设计模式到前端MVC-洪宇
    Todo&Rocket
  • 原文地址:https://www.cnblogs.com/bear-blogs/p/9656001.html
Copyright © 2011-2022 走看看