zoukankan      html  css  js  c++  java
  • 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-->

     效果图:

  • 相关阅读:
    维度穿梭
    演绎与抽象
    幻想的功能
    深层探宝
    内存游戏
    函数内功
    共享与私有的变量
    参数的格式
    功能模拟与功能实现
    【Oracle】基础知识查漏补缺
  • 原文地址:https://www.cnblogs.com/hool/p/12667253.html
Copyright © 2011-2022 走看看