熟悉HTML5的人应该都知道,placeholder这个属性是HTML5中新增的属性,该属性的作用是规定可描述输入字段预期值的简短的提示信息,该提示会在用户输入之前显示在输入字段中,会在用户输入字段后消失,有些浏览器则是获得焦点后该提示便消失(如Safari、IE)
适用范围:placeholder 属性适用于下面的 input 类型:text、search、url、tel、email 和 password。
因为是HTML5中新增的属性,所以会存在兼容性问题。下面说说浏览器的支持情况:
IE10+、Firefox、Opera、Chrome 和 Safari 均支持 placeholder 属性。IE9及以下版本不支持input的placeholder属性。
案例:
该提示文字会有自己默认的颜色
浏览器默认的:<input type="text" placeholder="请输入您要搜索的内容" />
然而有时候,我们并不希望用该默认颜色,而是想自定义颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
input::-webkit-input-placeholder{
color:red;
}
input::-moz-placeholder{/* Mozilla Firefox 19+ */
color:red;
}
input:-moz-placeholder{/* Mozilla Firefox 4 to 18 */
color: red;
}
input:-ms-input-placeholder{
color: red;
}
</style>
</head>
<body>
自定义placeholder:<input type="text" placeholder="请输入您要搜索的内容" />
</body>
</html>