内容简介：css：默认的 checkbox、input、radio 太丑了？我来教你改变使用纯 css3 改写的带动画的默认样式
项目的github地址为： https://github.com/sunshine940326/css3formeledemo
本文首发于我的个人博客， http://cherryblog.site/ ；欢迎大家查看我的其他博文
最近在做公司后台的优化项目，拿到设计稿一看，设计师觉得默认的input、checkbox、radio太丑了，要优化，在做了几个demo之后找到了要怎么优化这些样式的方法，我优化的原则有以下几点：
- 因为是在已有的项目上做优化，所以尽量在不改变原有结构的基础上进行修改
- input、checkbox这些大都是表单里面的元素，所以大部分跟后台有交互，保留原有属性，只增加新的class或者id
- 只使用css3，并且其属性也都是input，当然也可以直接使用img代替，或者用div+span模拟，但是这就不叫做“优化”，而是模仿了。
- 使用sass，只需要改变参数就可以反复多次使用
#思路
大致的原理都是使用html原生的标签元素标签 checkbox 或者 input ，在后面加上 label 标签，将一些原有的元素隐藏，然后再用css设置你想要样式，行为方面都是根据原生属性来判断，不需要使用js。
感兴趣的同学可以下载github项目，我也可以将代码增加的博文中，需要的同学请留言，因为怕全是代码影响阅读`
checkbox
checkbox demo1
首先来看一个checkbox，实现这个动画其实很简单，只运用css就可以实现。实现的原理是绑定checkout和label,用label控制是否checked。点击label的时候改变checkbox的属性
先将checkbox隐藏，然后label为一个只有border的框框，使用after和befor伪元素来实现对号的两部分。
0.4，height为0，设置不同的旋转角度，让befor和after合起来刚好是一个对号。
然后用css动画设置使其height达到width
0.7和width*0.35并控制动画使其连贯播放，
checkboxdemo2
checkboxdemo3
checkboxdemo4
input
input的优化源于在掘金上看到的一篇文章，效果着实小清新，于是就使用拿来主义，写了一个简易版的demo，效果如下，运用的是flex布局还有伪元素placeholder来实现的。
- 输入框清除默认样式
- 当输入框获得焦点时，输入框原本的文字向上移，并且下方蓝色的线宽度由0变为100
- 如果没有输入内容，还变为未输入的状态
先贴上代码html代码
html结构很简单，使用的是HTML原生的form元素input和label；在效果中的“请输入内容”这几个字不是使用的placeholder，而是使用的label，但是也设置有placeholder,只不过是把placeholder的透明度设置为0，因为我们需要根据placeholder是否显示来设置下方line的宽度和label的位置。
div.input-container
input type="input" id="input" placeholder="请输入内容"
label for="input"
div.bottom-line
完整html代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="scss/main.css">
</head>
<body>
<div class="input-container">
<input type="input" id="input" placeholder="请输入内容">
<label for="input">请输入内容</label>
<div class="bottom-line"></div>
</div>
</body>
</html>
css代码
全部的动画效果都只使用了css，但是使用的一些新特性浏览器兼容性还没有那么好，兼容到ie10.布局使用的是flex，动画效果用的是用的transform。运用伪类placeholder判断是否输入了文字，如果输入了文字下方的line宽度变为100%；label中的文字上移并且变小
代码如下:
$width: 500px;
$label-font-color: #3f4f5b;
$label-focus-font-color: rgb(82, 97, 108);
$border-bottom-color: #d5d5d5;
$focus-border-color: rgb(101, 141, 181);
$transform-top: 10px;
$transform-time: 0.3s;
$scale: 0.9;
.input-container {
width: $width;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-flow: column-reverse;
flex-flow: column-reverse;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
margin: 100px auto
}
.input-container input {
-webkit-box-ordinal-group: 11;
order: 10;
-ms-flex-order: 10;
outline: none;
border: none;
width: 100%;
padding: 10px 0;
font-size: 20px;
border-bottom: 1px solid $border-bottom-color;
text-indent: 10px;
}
.input-container input::-moz-placeholder {
opacity: 0;
}
.input-container input::-webkit-input-placeholder {
opacity: 0;
}
.input-container input:-ms-input-placeholder {
opacity: 0;
}
.input-container input, .input-container label {
transition: all $transform-time;
}
.input-container label {
-webkit-box-ordinal-group: 101;
-ms-flex-order: 100;
order: 100;
color: $label-font-color;
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: translate(10px, 40px);
transform: translate(0px, 40px);
}
.input-container .bottom-line {
order: 2;
width: 0;
height: 2px;
background: $focus-border-color;
transition: all $transform-time;
}
.input-container input:focus {
border-bottom-color: #fff;
}
.input-container input:focus ~ div, .input-container input:not(:placeholder-shown) ~ div {
width: 100%
}
.input-container input:focus + label, .input-container input:not(:placeholder-shown) + label {
color: $label-focus-font-color;
-webkit-transform: translate(10px) scale($scale);
transform: translate(10px) scale($scale)
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
- 利用分析函数改写范围判断自关联查询
- 小米正式开源 SQL 智能优化与改写工具 SOAR
- 小米正式开源 SQL 智能优化与改写工具 SOAR
- 小米开源自研智能 SQL 优化与改写工具 SOAR 使用指南
- 木兰语言 0.0.15.1：继续改写 Python 冒险游戏；引用包路径规则小结
- SOAR：小米出品的对 SQL 进行优化和改写的自动化工具
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
