首页 > 其他 > 详细

radio单选框样式

时间:2020-04-09 16:24:04      阅读:96      评论:0      收藏:0      [点我收藏+]

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-->

 效果图:

技术分享图片

 

radio单选框样式

原文:https://www.cnblogs.com/hool/p/12667253.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!