[CSS揭秘]自定义单选框和复选框
2021-06-15 03:06
标签：前端框架 bbb 简单介绍 元素 rgba shadow 项目 复选框 active 很多Web前端工程师肯定都会遇到过，在项目中，UI设计师跑来跟你说，我这个地方的表单控件需要设计成这个样子那个样子。但是用CSS却不能够修改这些控件的默认样式，于是乎，只能通过div+javascript技术来进行模拟。特别是在如今移动端的崛起时代，更加注重用户的体验。于是就更加需要这样一种hack技术。 如果对如今的前端框架有过了解，都会知道组件这个概念。那么在这些框架中，都会提供一些单选框或复选框按钮组件。可见大家之前受到表单元素的默认样式的毒害有多深。 今天先给大家简单介绍一下如何通过CSS来实现单选框和复选框组件。 原理其实很简单，单选框就是input[type=‘radio‘]而复选框就是input[type=‘checkbox‘] 利用label元素的for属性与表单控件的id相互关联就能起到触发开关的作用。而label元素又是可以通过CSS自定义默认样式的。于是就可以将真正的input标签隐藏起来。 根据前面介绍的方法，可以很容易模拟出一个开关式按钮，也就是直接修改label标签样式使得其看起来和按钮一致。 原理很简单，当你掌握了这种方法之后，可以配合JS来实现更多有用的表单控件组件。 [CSS揭秘]自定义单选框和复选框 标签：前端框架 bbb 简单介绍 元素 rgba shadow 项目 复选框 active 原文地址：http://www.cnblogs.com/joyjoe/p/7277018.htmlinput 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;
}
实战: 开关式按钮
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;
}