关于本文中单选框与复选框的自定义样式,只针对-webkit -moz浏览器内核来讲,所以必然不考虑IE的兼容性问题,如果想使用这种方式来自定义单选框与复选框样式,请尽量在移动端中使用;毕竟pc端有万恶的IE
在开发过程中,浏览器原始的单选框和复选框的样式确实有点丑陋,为了满足设计稿的样式,有时候我们不得不去做一些模拟复选框和单选框的形式,但是这样未免又多增加了一些DOM结构,这并不是我们正真想要的;废话不多说,上代码;
- //html
- <input type="radio" />
- //CSS部分
- <style>
- /**
- * 单选框自定义样式
- **/
- input[type=radio]{
- /*去除浏览器默认样式*/
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- /*自定义样式*/
- position: relative;
- display: inline-block;
- vertical-align: top;
- width: 20px;
- height: 20px;
- border: 1px solid #00bfff;
- outline: none;
- cursor: pointer;
- /*设置为圆形,看起来是个单选框*/
- -webkit-border-radius: 20px;
- -moz-border-radius: 20px;
- border-radius: 20px;
- }
- /**
- * 单选框 选中之后的样式
- **/
- input[type=radio]:after{
- content: '';
- position: absolute;
- width: 12px;
- height: 12px;
- display: block;
- left: 0;
- top: 0;
- right: 0;
- bottom: 0;
- margin: auto;
- background: #00bfff;
- -webkit-border-radius: 12px;
- -moz-border-radius: 12px;
- border-radius: 12px;
- -webkit-transform: scale(0);
- -moz-transform: scale(0);
- transform: scale(0);
- /*增加一些动画*/
- -webkit-transition : all ease-in-out 300ms;
- -moz-transition : all ease-in-out 300ms;
- transition : all ease-in-out 300ms;
- }
- input[type=radio]:checked:after{
- -webkit-transform: scale(1);
- -moz-transform: scale(1);
- transform: scale(1);
- }
- </style>
appearance是css3的属性,他的意思是使得标签的样式像他设定的参数一样;
他总共有7个参数;
normal->> 将元素呈现为常规元素。
icon->> 将元素呈现为图标(小图片)。
window->> 将元素呈现为视口。
button->> 将元素呈现为按钮。
menu->> 将元素呈现为一套供用户选择的选项。
field->> 将元素呈现为输入字段。
none->> 去除浏览器默认样式
:checked同样是css3中的一个伪类,他的作用是某个标签被选中时来使用的,使用方法和:hover :active :link这些伪类一样;
上面我在radio后面加了一个伪类:after,他要稍微比定义的单选框要小点,这样显示出来更加美观一点,在未选中之前让他scale(0),然后配合动画,在选中的时候scale(1),这样就有一个渐变填充的动画了;
那么radio的自定义样式就这样了,最后呈现的样式如下图:
- /**
- * html代码
- **/
- <input type="checkbox" />
- /**
- * css代码
- **/
- <style>
- input[type=checkbox]{
- margin: 50px;
- /*同样,首先去除浏览器默认样式*/
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- /*编辑我们自己的样式*/
- position: relative;
- width: 20px;
- height: 20px;
- background: transparent;
- border:1px solid #00BFFF;
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- border-radius: 4px;
- outline: none;
- cursor: pointer;
- }
- input[type=checkbox]:after{
- content: '√';
- position: absolute;
- display: block;
- width: 100%;
- height: 100%;
- background: #00BFFF;
- color: #fff;
- text-align: center;
- line-height: 18px;
- /*增加动画*/
- -webkit-transition: all ease-in-out 300ms;
- -moz-transition: all ease-in-out 300ms;
- transition: all ease-in-out 300ms;
- /*利用border-radius和opacity达到填充的假象,首先隐藏此元素*/
- -webkit-border-radius: 20px;
- -moz-border-radius: 20px;
- border-radius: 20px;
- opacity: 0;
- }
- input[type=checkbox]:checked:after{
- -webkit-border-radius: 0;
- -moz-border-radius: 0;
- border-radius: 0;
- opacity: 1;
- }
- </style>
写法和radio思路一致,首先都是去除浏览器样式,然后自定义样式,这里填充的那种动画,就是利用渐现和圆弧填充为四个角的这么个思路,其实css还是有很多地方挺有意思的,大家平时多挖掘就会发现了;
最后样式如下:
再来看一种开关模式的复选框;
- input[type=checkbox]{
- /*同样,首先去除浏览器默认样式*/
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- /*编辑我们自己的样式*/
- position: relative;
- background: #fff;
- border: 1px solid #00BFFF;
- width: 56px;
- height: 28px;
- -webkit-border-radius: 20px;
- -moz-border-radius: 20px;
- border-radius: 20px;
- /*增加动画*/
- -webkit-transition: all ease-in-out 300ms;
- -moz-transition: all ease-in-out 300ms;
- transition: all ease-in-out 300ms;
- outline: none;
- cursor: pointer;
- }
- input[type=checkbox]:after{
- content: 'off';
- position: absolute;
- left: 2px;
- top: 2px;
- display: block;
- width: 22px;
- height: 22px;
- background: #00BFFF;
- color: #fff;
- text-align: center;
- line-height: 22px;
- /*增加动画*/
- -webkit-transition: all ease-in-out 300ms;
- -moz-transition: all ease-in-out 300ms;
- transition: all ease-in-out 300ms;
- -webkit-border-radius: 20px;
- -moz-border-radius: 20px;
- border-radius: 20px;
- font-size: 12px;
- }
- input[type=checkbox]:checked{
- background: #00BFFF;
- }
- input[type=checkbox]:checked:after{
- content: 'on';
- left: 30px;
- background: #fff;
- color: #00BFFF;
- }
这里就是对上面普通的复选框稍微做了一些改变,首先宽度增大,自身增加一个动画,不然背景变化没有渐变;
然后伪元素位置根据选中和未选中来确定left的值和content中的值就是图中的on与off的转变;
最后样子见下图:
好了,看完之后,是不是有点小激动呢,这么简单就能改变丑陋的单选框复选框,赶快去试试吧;
来源: https://www.2cto.com/kf/201711/696819.html