×

小技巧:用CSS样式优化原生表单组件radio

作者:andy0012019.04.02来源:Web前端之家浏览:1897评论:0
关键词:formradio表单
微信公众号

微信公众号

介绍个小技巧:用CSS样式优化原生表单组件radio,一起来试试吧。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>【radio】css优化原生组件之单选</title>
</head>
<body>
<ul>
    <li>
        <input type="radio" disabled="true" name="sex" id="s3"><label for="s3"></label>
        <label for="s3">满100元可用</label>
    </li>
    <li>
        <input type="radio" name="sex" id="s1"><label for="s1"></label>
        <label for="s1">商家优惠套餐</label>
    </li>
    <li>
        <input type="radio" name="sex" id="s2"><label for="s2"></label>
        <label for="s2">下单立减5元优惠券</label>
    </li>
    <li>
        <input type="radio" name="sex" id="s4"><label for="s4"></label>
        <label for="s4">立享8折</label>
    </li>
</ul>

<style type="text/css">
ul,li{
    list-style: none;
}
/*取紧邻input的下一个label*/
input+label{
    width: 14px;height: 14px;display: inline-block;
    border: 1px solid #189cfb;border-radius: 50%;
    text-align: center;line-height: 12px;
    margin-right: 5px;
}
input{
    display: none;
}
input+label:after{
    transition: 0.3s;
    transform: scale(0.8);
    content: '';
    display: inline-block;
    width: 10px;height: 10px;border-radius: 50%;
    background-color: #fff;
}

input:checked+label:after{
    background-color: #189cfb;transform: scale(1);
}
li{
    display: flex;align-items: center;height: 46px;
}
label{
    cursor: pointer;font-size: 16px;
}
/*不可选中*/
input:disabled+label{
    border-color: #aaa;
}
input:disabled+label+label{
    color: #aaa;text-decoration: line-through;
}
</style>
</body>
</html>

OK,就这些东西了,其实大家可以试试其他的方式呢。

温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
http://jiangweishan.com/article/html128302194809214.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • 老部落运维

    都是拼音的错呵呵...

  • admin

    已加上,麻烦把我的文字改下:Web前端之家...

  • 老部落运维

    已添加贵站链接我站:https://www.laobuluo.com/(老部落运维)...

  • admin

    这个问题需要看不同的终端预览,可以加群具体聊,谢谢!...

  • 竹叶轻拂水

    在写PC端页面的时候,字体超过16px有的字体会显示的上下不一,凸出来一点,很难看,有没有什么好的方...

  • 素材火

    前三意料之中,中国只有百度上榜...

  • 开创者素材

    网站资源下载站,交换个友链如何?www.kaicz.com...

  • CSS66

    关于CSS组合选择符总结得全面,学习了!...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2019 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.5.2 Zero