placeholder 属性（占位文本）用法

最新推荐文章于 2024-11-25 16:14:12 发布

原创最新推荐文章于 2024-11-25 16:14:12 发布 · 3.3k 阅读

3 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了HTML5中新增的placeholder属性，该属性用于在输入字段为空时显示提示信息，并在字段获得焦点时消失。文章还提供了适用于不同输入类型的示例代码及如何使用CSS设置placeholder样式的指南。

placeholder 属性是 HTML5 中的新属性。

定义和用法

placeholder 属性提供可描述输入字段预期值的提示信息（hint）。

该提示会在输入字段为空时显示，并会在字段获得焦点时消失。

注释：placeholder 属性适用于以下的 <input> 类型：text, search, url, telephone, email 以及 password。

<textarea placeholder="Enter your India Post tracking number, like XX123456789IN." maxlength="18" name="number" id="no"></textarea>

css设置 placeholder 样式

.note textarea{
	font-size:24px;
}
::-webkit-input-placeholder { /* WebKit browsers */
    color:    #ccc;
	font-size:24px;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #ccc;
	font-size:24px;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #ccc;
	font-size:24px;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #ccc;
	font-size:24px;
}