鼠标点击input输入框,placeholder在chrome浏览器下不消失的问题

我们先来看一个图片,没错就是要是实现这个效果,input或者textarea框在获取焦点后placeholder就消失的效果。

引用自 https://stackoverflow.com/questions/25242859/textarea-placeholder-not-working-on-blur-in-chrome-for-mac?r=SearchResults

Css3有个新属性placeholder,在非webkit的浏览器下input或者textarea获取焦点后,placeholder就可以消失,

显然在chrome浏览器下是不支持的。度娘里一堆好长条的js的解决方案,在stackoverflow里发现了css的解决方案,

css

textarea:focus::-webkit-input-placeholder { color: transparent; }

textarea:focus::-moz-placeholder{ color: transparent; }

textarea:focus:-moz-placeholder{ color: transparent; }

input:focus::-webkit-input-placeholder { color: transparent; }

input:focus::-moz-placeholder{ color: transparent; }

input:focus:-moz-placeholder{ color: transparent; }

HTML


摘自 https://stackoverflow.com/questions/25242859/textarea-placeholder-not-working-on-blur-in-chrome-for-mac?r=SearchResults

你可能感兴趣的:(鼠标点击input输入框,placeholder在chrome浏览器下不消失的问题)