首页 > 代码库 > [CSS揭秘]自定义单选框和复选框
[CSS揭秘]自定义单选框和复选框
很多Web前端工程师肯定都会遇到过，在项目中，UI设计师跑来跟你说，我这个地方的表单控件需要设计成这个样子那个样子。但是用CSS却不能够修改这些控件的默认样式，于是乎，只能通过div+javascript技术来进行模拟。特别是在如今移动端的崛起时代，更加注重用户的体验。于是就更加需要这样一种hack技术。
如果对如今的前端框架有过了解，都会知道组件这个概念。那么在这些框架中，都会提供一些单选框或复选框按钮组件。可见大家之前受到表单元素的默认样式的毒害有多深。
今天先给大家简单介绍一下如何通过CSS来实现单选框和复选框组件。
原理其实很简单，单选框就是input[type=‘radio‘]而复选框就是input[type=‘checkbox‘] 利用label元素的for属性与表单控件的id相互关联就能起到触发开关的作用。而label元素又是可以通过CSS自定义默认样式的。于是就可以将真正的input标签隐藏起来。
<input type="checkbox" id="awesome"/><label for="awesome">AweSome!</label>
input[type="checkbox"]{ position: absolute; clip: rect(0,0,0,0);;}input[type="checkbox"] + label::before{ content: "\a0"; display: inline-block; vertical-align: 0.2em; width: 0.8em; height: 0.8em; margin-right: 0.2em; border-radius: 0.2em; background: silver; text-indent: 0.15em; line-height: 0.65;}input[type="checkbox"]:checked + label::before{ content: "\2713"; background: yellowgreen;}input[type="checkbox"]:focus + label::before{ box-shadow: 0 0 0.1em 0.1em #58a;}input[type="checkbox"]:disabled + label::before{ background: gray; box-shadow: none; color: #555;}
实战: 开关式按钮
根据前面介绍的方法，可以很容易模拟出一个开关式按钮，也就是直接修改label标签样式使得其看起来和按钮一致。
input[type="radio"]{ position: absolute; clip: rect(0,0,0,0); }input[type="radio"] + label{ display: inline-block; padding: 0.3em 0.5em; background: #ccc; background-image: linear-gradient(#ddd, #bbb); border: 1px solid rgba(0,0,0,0.2); border-radius: 0.3em; box-shadow: 0 1px white inset; text-align: center; text-shadow: 0 1px 1px white;}input[type="radio"]:checked + label,input[type="radio"]:active + label{ box-shadow: 0.05em 0.1em 0.2em rgba(0,0,0,0.6) inset; border-color: rgba(0,0,0,0.3); background: #bbb;}
原理很简单，当你掌握了这种方法之后，可以配合JS来实现更多有用的表单控件组件。
[CSS揭秘]自定义单选框和复选框
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。