自定义input checkbox或者radio的样式

李增田发布于2019-08-30 11:17 / 646人阅读

摘要：浏览器自带的单选钮和多选框的样式都比较单一，很多时候我们需要更换它们的样式。

浏览器自带的单选钮和多选框的样式都比较单一，很多时候我们需要更换它们的样式。

HTML


    
    这是一个单选钮

关键：
1，label的for属性绑定到input框的id属性，这样保证label再被点击时也点击了input单选钮（label拥有了input的点击性质）
2，此时的input框可以被隐藏起来，将所有样式写到label上，做一个假的单选钮样式

CSS

/*隐藏input*/
input[type="radio"] {
    display: none;
}
/*label虚拟选择器添加单选钮未点击状态样式*/
input[type="radio"]+label:before {
    background: url(../images/radio-check-out.png);
}
/*label虚拟选择器添加单选钮点击状态样式*/
input[type="radio"]:checked+label:before {
    background: url(../images/radio-check-in.png);
}
/*样式上完成单选框状态的展示*/

效果

云服务器 GPU云服务器自定义按钮样式 h5视频播放器可自定义样式自定义镜像的使用请教自定义控件的问题

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

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

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

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

asce1885 2019-08-02 12:09 评论0 收藏0
总结：如何修改美化radio、checkbox的默认样式

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

Anshiii 2019-08-29 17:26 评论0 收藏0
用纯CSS美化radio和checkbox

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

Donne 2019-08-19 17:37 评论0 收藏0
用纯CSS美化radio和checkbox

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

terro 2019-08-30 12:47 评论0 收藏0