清除HTML中焦点的HTML5占位符属性文本

Question

有什么方法可以清除Chrome中的placeholder焦点文本,Firefox会清除焦点上的文本,但Chrome不会.

这会使用户混淆条形图中的文本是否被键入,或者它是占位符文本(即使我将文本颜色更改为浅灰色),我不想为此使用不必要的JavaScript或jQuery,我想知道是否有一些HTML/CSS解决方案

演示小提琴

Chrome预览(焦点上)

Firefox预览(焦点上)

Answer 1

尝试使用

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

它将解决问题.由于页面加载时自动聚焦,文本在焦点上可见.

Answer 2

现在firefox以其他方式工作,所以我使用了这段代码:

input:focus::-webkit-input-placeholder{
    color: transparent!important;
}
input:focus::-moz-placeholder{
    color: transparent!important;
}
input:focus:-moz-placeholder{
    color: transparent!important;
}