HTML/CSS|输入框美化（placeholder）
本文主要介绍针对输入框的美化
为了兼容ie7+，不能直接使用H5的属性placeholder，但是又需要实现输入提示效果，所以总结了以下两种方式。
最终实现效果示例：
文章图片
文章图片
方式一：
通过添加p标签，并绑定js事件来模拟输入框光标进入隐藏效果。
输入您的姓名
输入手机号码
输入公司全称
【HTML/CSS|输入框美化（placeholder）】JS事件
图一就是通过这种方式实现的。主要原理是直接通过操作元素的隐藏显示来达到效果。
方式二：
方式二主要通过使用h5的placeholder属性，然后针对IE浏览器做兼容处理。
H5属性在chrome和firefox下当然没问题啦，但是要兼容IE7及其以上呢，就需要处理一下了，其实原理还是跟方式一类似，只不过在其他浏览器中是默认效果就感觉挺好的。
图二就是通过这种方式实现的，在IE7及以上都是完美显示。
优化及兼容注意事项
- 布局问题，首先在布局上一定要注意层级关系，表单前面的小图标可能需要通过z-index来调整，不然可能不显示，一般我是用绝对定位来布局，当然也可以用背景和流布局。
- 布局好之后设置div的padding来给小图标腾出位置。input输入框的宽度一定要跟显示的一样，不然在有些浏览器中出现输入cookie提示时就暴露问题了，会出现输入框的宽度和提示下拉框的宽度不一样，很难看。意思就是说不要用padding来设置。
- 输入框中的字体是可以调整的，就是设置的时候一定要对input针对性的设置才行，通常浏览器自带的默认字体可能不符合整个页面设计效果，所以可能需要单独设置一下。前面两个效果都是通过设置了字体的。
- 对input原生效果的清除，目前我常用的有如下属性
border: none; 或者设置成颜色和背景一样
outline: none; 这里是取消focus边框轮廓效果
当然你可以添加box-shadow添加边框阴影效果，有个外发光的效果。
推荐阅读
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- Node.js中readline模块实现终端输入
- django-前后端交互
- 爬虫数据处理HTML转义字符
- HTML基础--基本概念--跟着李南江学编程
- 3.css浮动
- 大语文4
- React.js的表单(六)
- iOS富文本为html时，修改默认字体颜色
- 瀑布流布局