编辑: 现在所有浏览器都支持

输入:重点::占位符{ 颜色:透明; } <input type="text" placeholder="在这里输入内容!">

Firefox 15和IE 10+现在也支持这个功能。要扩展Casey Chu的CSS解决方案:

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */

/* Webkit */
[placeholder]:focus::-webkit-input-placeholder { opacity: 0; }
/* Firefox < 19 */
[placeholder]:focus:-moz-placeholder { opacity: 0; }
/* Firefox > 19 */
[placeholder]:focus::-moz-placeholder { opacity: 0; }
/* Internet Explorer 10 */
[placeholder]:focus:-ms-input-placeholder { opacity: 0; }

纯CSS解决方案(不需要JS)

基于@Hexodus和@Casey Chu的回答，这里是一个更新的跨浏览器解决方案，利用CSS不透明和过渡淡出占位符文本。它适用于任何可以使用占位符的元素，包括文本区域和输入标记。

::-webkit-input-placeholder { opacity: 1; -webkit-transition: opacity .5s; transition: opacity .5s; } /* Chrome <=56, Safari < 10 */ :-moz-placeholder { opacity: 1; -moz-transition: opacity .5s; transition: opacity .5s; } /* FF 4-18 */ ::-moz-placeholder { opacity: 1; -moz-transition: opacity .5s; transition: opacity .5s; } /* FF 19-51 */ :-ms-input-placeholder { opacity: 1; -ms-transition: opacity .5s; transition: opacity .5s; } /* IE 10+ */ ::placeholder { opacity: 1; transition: opacity .5s; } /* Modern Browsers */ *:focus::-webkit-input-placeholder { opacity: 0; } /* Chrome <=56, Safari < 10 */ *:focus:-moz-placeholder { opacity: 0; } /* FF 4-18 */ *:focus::-moz-placeholder { opacity: 0; } /* FF 19-50 */ *:focus:-ms-input-placeholder { opacity: 0; } /* IE 10+ */ *:focus::placeholder { opacity: 0; } /* Modern Browsers */ <div> <div><label for="a">Input:</label></div> <input id="a" type="text" placeholder="CSS native fade out this placeholder text on click/focus" size="60"> </div> <br> <div> <div><label for="b">Textarea:</label></div> <textarea id="b" placeholder="CSS native fade out this placeholder text on click/focus" rows="3"></textarea> </div>

修正

编辑1(2017):更新以支持现代浏览器。 编辑2(2020):添加了可运行的堆栈片段。

我喜欢css的过渡方法。在Focus上，占位符淡出;)也适用于文本区域。

谢谢凯西·朱的好主意。

textarea::-webkit-input-placeholder, input::-webkit-input-placeholder { 
    color: #fff;
    opacity: 0.4;
    transition: opacity 0.5s;
    -webkit-transition: opacity 0.5s; 
}

textarea:focus::-webkit-input-placeholder, input:focus::-webkit-input-placeholder  { 
    opacity: 0;
}

为了增强@casey-chu和pirate rob的回答，这里有一个更跨浏览器兼容的方法:

    /* WebKit browsers */
input:focus::-webkit-input-placeholder { color:transparent; }

    /* Mozilla Firefox 4 to 18 */
input:focus:-moz-placeholder { color:transparent; }

    /* Mozilla Firefox 19+ */
input:focus::-moz-placeholder { color:transparent; }

    /* Internet Explorer 10+ */
input:focus:-ms-input-placeholder { color:transparent; }

如果您的输入背景颜色是白色，那么您可以将占位符文本的颜色设置为焦点，以匹配输入背景-使文本不可见;从理论上讲。如果你的输入是不同的颜色，那么只需简单地改变颜色以匹配它。

input:focus::placeholder {
  color: white;
}

此外，您可以将颜色设置为“透明”，如其他答案所示。