• 原生 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>
  • 相关阅读:
    shell管道和重定向
    shell脚本
    Hexo学习笔记--常用命令及部署步骤
    Git学习笔记--Git常用命令
    Spark link集合
    Struts2学习笔记--Struts2的体系结构
    JNI错误记录--JNI程序调用本地库时JVM崩溃
    Hibernate学习笔记--使用ThreadLocal
    Hibernate学习笔记--核心编程
    Hibernate学习笔记--映射配置文件详解
  • 原文地址:https://www.cnblogs.com/wxhhts/p/12054891.html
Copyright © 2020-2023  润新知