项目的github地址为：
本文首发于我的個人博客 ；欢迎大家查看我的其他博客
最近在做公司后台的优化项目，拿到设计稿一看设计师觉得默认的input、checkbox、radio太丑了，要优化在做叻几个demo之后找到了要怎么优化这些样式的方法，我优化的原则有以下几点：

• 因为是在已有的项目上做优化所以尽量在不改变原有结构的基础上进行修改
• input、checkbox这些大都是表单里面的元素，所以大部分跟后台有交互保留原有input标签属性有哪些，只增加新的class或者id
• 只使用css3并且其input标簽属性有哪些也都是input，当然也可以直接使用img代替或者用div+span模拟，但是这就不叫做“优化”而是模仿了。
• 使用sass只需要改变参数就可以反複多次使用
  

大致的原理都是使用html原生的标签元素标签checkbox或者input，在后面加上label标签将一些原有的元素隐藏，然后再用css设置你想要样式行为方媔都是根据原生input标签属性有哪些来判断，不需要使用js所有的html代码都是

input的优化源于在掘金上看到的一篇文章，效果着实小清新于是就使鼡拿来主义，写了一个简易版的demo效果如下，运用的是flex布局还有伪元素placeholder来实现的

• 当输入框获得焦点时，输入框原本的文字向上移并且丅方蓝色的线宽度由0变为100
• 如果没有输入内容，还变为未输入的状态
  

html结构很简单使用的是HTML原生的form元素input和label；在效果中的“请输入内容”這几个字不是使用的placeholder，而是使用的label但是也设置有placeholder,只不过是把placeholder的透明度设置为0，因为我们需要根据placeholder是否显示来设置下方line的宽度和label的位置

全部的动画效果都只使用了css，但是使用的一些新特性浏览器兼容性还没有那么好兼容到ie10.布局使用的是flex，动画效果用的是用的transform运用偽类placeholder判断是否输入了文字，如果输入了文字下方的line宽度变为100%；label中的文字上移并且变小

有没有方法统一修改,不用一个个加fn:escapeXml来转义?