资讯专栏INFORMATION COLUMN

总结:如何修改美化radio、checkbox的默认样式

asce1885 / 2383人阅读

摘要:现在前端页面效果日益丰富,默认的组件样式显然不能满足设计需求。前段时间开发项目中刚好接触到相关的需求,在此特地整理下修改样式的方法。它使用纯编写,没有任何的文件。

现在前端页面效果日益丰富,默认的input组件样式显然不能满足设计需求。前段时间开发项目中刚好接触到相关的需求,在此特地整理下修改radio、CheckBox样式的方法。

原理:大致原理都是使用原生的checkbox或input标签,在其后面设置相关联的label元素。给元素设置为透明,然后通过定位让用户看到的是

利用css3伪元素实现样式修改

html代码

   

您的性别:

css样式

.radio-sex {
    position: relative;
    display: inline-block;
    margin-right: 12px;
}

.radio-sex input {
    vertical-align: middle;
    margin-top: -2px;
    margin-bottom: 1px;
    /* 前面三行代码是为了让radio单选按钮与文字对齐 */
    width: 20px;
    height: 20px;
    appearance: none;/*清楚默认样式*/
    -webkit-appearance: none;
    opacity: 0;
    outline: none;
    /* 注意不能设置为display:none*/
}

.radio-sex label {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    /*注意层级关系,如果不把label层级设为最低,会遮挡住input而不能单选*/
    width: 20px;
    height: 20px;
    border: 1px solid #3582E9;
    border-radius: 100%;
}

.radio-sex input:checked+label {
    background: #3582E9;
}

.radio-sex input:checked+label::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 2px;
    width: 5px;
    height: 12px;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    transform: rotate(45deg);
}

优点:充分借助了CSS3的优势,无需使用js和图片,仅用纯CSS3就可搞定

缺点:兼容性较差,仅支持IE9+

案例:

利用图片实现样式修改

实现思路
1.设置input 属性hidden对该input进行隐藏

2.借助label for标签通过id绑定input ,这样在点击label时实际就是点击了input


                

3.定义label的样式,设置未选中状态的背景图

.advice{
                    height: 12px;
                    width: 12px;
                    display: inline-block;
                    background-image: url("https://caiyunupload.b0.upaiyun.com/newweb/imgs/icon-unchecked.png");
                    background-repeat: no-repeat;
                    background-position: center;
                    vertical-align: middle;
                    margin-top: -4px;
                }

4.使用相邻选择器设置选中状态label的样式

input[type="radio"]:checked + .advice{
                    background-image: url("https://caiyunupload.b0.upaiyun.com/newweb/imgs/icon-checked.png");
                }

以上是radio单选框的实现代码,checkbox也是类似 将input type定义成checkbox即可

利用插件实现 awesome-bootstrap-checkbox插件

awesome-bootstrap-checkbox是一款可以美化Bootstrap复选框和单选按钮的插件。它使用纯CSS编写,没有任何的javascript文件。它通过在原生Bootstrap组件的基础上做一些小改动,即可完成漂亮的美化效果。

演示地址:http://awesome-bootstrap-chec...
插件下载:https://www.bootcdn.cn/awesom...
注:需要引入awesome-bootstrap-checkbox.css、font-awesome.css以及font awesome对应的字体font文件

pretty.css

pretty.css是一款纯css3漂亮的checkbox和radio美化效果。pretty.css可以和多种字体图标结合使用,对原生的checkbox和radio进行美化,还可以制作按钮点击时的动画效果。

演示地址:http://www.htmleaf.com/Demo/2...
插件下载:https://www.bootcdn.cn/pretty...

小编知道的方法先介绍到这里,大家如有更好的方法欢迎留言讨论。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/53377.html

相关文章

  • 总结如何修改美化radiocheckbox默认样式

    摘要:现在前端页面效果日益丰富,默认的组件样式显然不能满足设计需求。前段时间开发项目中刚好接触到相关的需求,在此特地整理下修改样式的方法。它使用纯编写,没有任何的文件。 现在前端页面效果日益丰富,默认的input组件样式显然不能满足设计需求。前段时间开发项目中刚好接触到相关的需求,在此特地整理下修改radio、CheckBox样式的方法。 原理:大致原理都是使用原生的checkbox或inp...

    Anshiii 评论0 收藏0
  • 用纯CSS美化radiocheckbox

    摘要:先看看纯美化过后的和效果查看。项目地址在出现之前,我们美化和需要借助,最具代表性的就是,它功能强大复杂并且主题很多。为了更好的在项目中重用,我把美化的代码写成一个项目,叫,寓意像魔法一样去美化和。 Radio和checkbox需要美化吗?答案是必须的,因为设计风格一直都会变化,原生的样式百年不变肯定满足不了需求。 先看看纯CSS美化过后的radio和checkbox效果:查看。 项目地...

    Donne 评论0 收藏0
  • 用纯CSS美化radiocheckbox

    摘要:先看看纯美化过后的和效果查看。项目地址在出现之前,我们美化和需要借助,最具代表性的就是,它功能强大复杂并且主题很多。为了更好的在项目中重用,我把美化的代码写成一个项目,叫,寓意像魔法一样去美化和。 Radio和checkbox需要美化吗?答案是必须的,因为设计风格一直都会变化,原生的样式百年不变肯定满足不了需求。 先看看纯CSS美化过后的radio和checkbox效果:查看。 项目地...

    terro 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<