• radio单选框样式


    css:

    /*labelinputcheck*/
                .labelinputcheck{padding: 10px;}
                .labelinputcheck .inputcheck{padding: 0px 16px;}
                .labelinputcheck .inputcheck input[type="radio"]{position: relative; left: -9999em; vertical-align: middle;}
                .labelinputcheck .inputcheck input[type="radio"]:checked + .icon-check{border-width: 5px; border-color: #1AAD19;}
                .labelinputcheck .inputcheck .icon-check{width: 16px; height: 16px; border-radius: 50px; border: 1px solid #C9CDD3; display: inline-block; vertical-align: middle;}
                .labelinputcheck .inputcheck span{vertical-align: middle;}

    html:

    <!--labelinputcheck start-->
            <div class="labelinputcheck" align="right">
                <label class="inputcheck">
                    <input type="radio" name="name" value="1">
                    <i class="icon-check"></i>
                    <span>简体中文</span>
                </label>
                <label class="inputcheck">
                    <input type="radio" name="name" value="2">
                    <i class="icon-check"></i>
                    <span>English</span>
                </label>
                <input type="range" min="1" max="100" value="1">
            </div>
            <!--labelinputcheck stop-->

     效果图:

  • 相关阅读:
    [ Docker ] 基础安装使用及架构
    [ Docker ] 基础概念
    Nginx
    ELK
    SVN + Jenkins 构建自动部署
    Zabbix
    ELK
    ELK 部署文档
    vue.js在visual studio 2017下的安装
    vue.js是什么
  • 原文地址:https://www.cnblogs.com/hool/p/12667253.html
Copyright © 2020-2023  润新知