输入框内容和清除按钮的联动

1.实现方法：css3

2.使用条件：移动端 

---

*PC端要考虑浏览器版本的兼容性，未考证

3.具体内容

效果展示：

默认无内容，无清除按钮 输入内容，显示清除按钮

html代码：

利用type+required

css代码：

利用:vaild

4.原理解释

对需要定义的输入框，添加required 属性（IE10+）， 定义该字段是必填（或必选）的。

required属于HTML5表单验证属性. 如果文本框没有内容，则不合法；有内容，则合法，就会触发这里的

http://www.runoob.com/tags/att-input-required.html

对需要定义的清除按钮，默认定义none，

对内容存在的输入框，利用css伪类:vaild,来筛选清除按钮的状态切换

:valid 选择器在表单元素的值需要根据指定条件验证时设置指定样式。

http://www.runoob.com/cssref/sel-valid.html

---

额外扩展，IE11对输入框会默认增加清除按钮，需要自定义清除按钮重叠

::-ms-clear { display: none; }