1.实现方法:css3
2.使用条件:移动端
*PC端要考虑浏览器版本的兼容性,未考证
3.具体内容
效果展示:
html代码:
css代码:
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; }