美化input

美化input的代码示例：

使用的工具：

1. canuise：查看属性在不同浏览器的支持情况
2. QQ截图，检查颜色
3. iconfont获取icon.
4. xScope 4.3 is now available获取长宽高等样式
5. sip取颜色

小技巧：

1. 元素没有出现，使用假文字占位。
2. 在不同的浏览器中测试，防止不同的浏览器效果不同。

3. 在文档流中，写回车，就会有一个空格。在不同的操作系统，不同的浏览器，不同的字体下空格是不一样的。

   
   2.png

<input type = "text">/*这个地方的回车造成空格*/
<span class = "float-div">

4. 一旦出现问题，试图改一下display，改成inline-block等。
5. flex里面的元素是自带BFC的。
6. 不要直接写width=xxpx;height=xxpx;。
7. input默认的行高和height一样，那么字就是居中的。
8. vertical-align: top;可以去除img和其父容器之间下面的空隙`。
9. 出现不一定是display： block；还可能是display： flex；或者display: inline-block;

美化图片上传

美化图片上传代码示例：

美化按钮

• display:none和display: block是没有办法做动画的。
• 给元素添加pointer-events: none;就不会响应用户的所有事件。
  表单美化代码示例；