zoukankan      html  css  js  c++  java
  • 原生 input radio 优化

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
        </head>
        <style type="text/css">
            div {
              position: relative;
              line-height: 30px;
            }
            
            input[type="radio"] {
              width: 20px;
              height: 20px;
              opacity: 0;
            }
            
            label {
              position: absolute;
              left: 5px;
              top: 8px;
              width: 20px;
              height: 20px;
              border-radius: 50%;
              border: 1px solid #999;
            }
            
            /* 这只check 之后的样式 */
            input:checked+label {
              background-color: #0090FF;
              border: 1px solid #0090FF;
            }
            
            input:checked+label::after {
              position: absolute;
              content: "";
              width: 5px;
              height: 10px;
              top: 3px;
              left: 6px;
              border: 2px solid #fff;
              border-top: none;
              border-left: none;
              transform: rotate(45deg)
            }
        </style>
        <body>
        <form>
              <div>
                <input id="nan" type="radio" name="sex" checked>
                <label for="nan"></label>
                <span style="margin-left: 10px"></span>
              </div>
              <div>
                <input id="nv" type="radio" name="sex">
                <label for="nv"></label>
                <span style="margin-left: 10px"></span>
              </div>
            </form>
        </body>
    </html>
  • 相关阅读:
    故事讲的好,才会有人去思考:什么是成功的商业片——记《疯狂的石头》
    收集的特色flash网站
    pf负载均衡
    squid故障与解决方法汇总
    IIS7.0在Vista上的错误 0x80070021
    PF 默认会限制最大连接数5000问题
    Squid日志详解
    samba结合AD实现大型网络方案
    inotify监听+rsync
    AD帐号登陆samba自动创建主目录脚本
  • 原文地址:https://www.cnblogs.com/wxhhts/p/12054891.html
Copyright © 2011-2022 走看看