在网页表单开发中，输入框的placeholder提示文字默认样式通常比较单一，和整体页面设计风格不匹配，使用css伪类::placeholder可以直接修改这些提示文字的样式，让表单更符合设计要求。
::placeholder伪类基本用法
::placeholder是css的伪元素，用于选中输入框的占位提示文字，基本语法是在输入框选择器后添加::placeholder来定义样式。需要注意的是，它只能修改提示文字本身的样式，不能修改输入框的其他属性。
以下是一个最基础的示例，修改输入框提示文字的颜色和字体大小：
/* 选中所有input和textarea的placeholder */
input::placeholder,
textarea::placeholder {
color: #999999;
font-size: 14px;
}
可修改的样式属性
不是所有css属性都能作用于::placeholder选中后的提示文字，目前支持修改的属性主要有以下几类：
- 文字相关：
color、font-size、font-family、font-weight、font-style、line-height、text-align、letter-spacing、word-spacing - 文字装饰：
text-decoration、text-transform - 透明度：
opacity
像background、border、padding这类属于输入框本身的属性，是无法通过::placeholder修改的，如果需要调整输入框的边框等样式，需要直接对输入框元素设置。
浏览器兼容性处理
部分旧版本浏览器不支持标准的::placeholder写法，需要使用带浏览器前缀的伪类来兼容，不同浏览器的前缀写法如下：
| 浏览器 | 前缀写法 |
|---|---|
| Chrome、Safari | ::-webkit-input-placeholder |
| Firefox 19+ | ::-moz-placeholder |
| Firefox 18- | :-moz-placeholder |
| IE10+ | :-ms-input-placeholder |
为了兼容更多浏览器，实际开发中通常会同时写多种前缀的写法，示例如下：
/* 兼容不同浏览器的placeholder样式 */
input::-webkit-input-placeholder {
color: #666666;
font-size: 13px;
}
input::-moz-placeholder {
color: #666666;
font-size: 13px;
}
input:-ms-input-placeholder {
color: #666666;
font-size: 13px;
}
input::placeholder {
color: #666666;
font-size: 13px;
}
实际使用示例
下面是一个完整的html和css示例，实现一个带自定义提示文字样式的输入框：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>placeholder样式示例</title>
<style>
.custom-input {
width: 300px;
height: 40px;
padding: 0 10px;
border: 1px solid #cccccc;
border-radius: 4px;
outline: none;
}
/* 输入框获取焦点时修改边框颜色 */
.custom-input:focus {
border-color: #409eff;
}
/* 自定义placeholder样式 */
.custom-input::-webkit-input-placeholder {
color: #aaaaaa;
font-style: italic;
letter-spacing: 1px;
}
.custom-input::-moz-placeholder {
color: #aaaaaa;
font-style: italic;
letter-spacing: 1px;
}
.custom-input:-ms-input-placeholder {
color: #aaaaaa;
font-style: italic;
letter-spacing: 1px;
}
.custom-input::placeholder {
color: #aaaaaa;
font-style: italic;
letter-spacing: 1px;
}
</style>
</head>
<body>
<input type="text" class="custom-input" placeholder="请输入用户名">
</body>
</html>
注意事项
- ::placeholder是伪元素，使用的是双冒号
::，部分旧写法使用单冒号:，虽然部分浏览器也支持，但按照标准规范建议使用双冒号 - 如果输入框设置了
value属性，placeholder的提示文字不会显示，只有输入框内容为空时才会展示 - 不要在::placeholder的样式中设置
display、position这类布局属性，这类属性对提示文字无效，还可能导致样式异常
css::placeholder伪类输入框样式修改时间：2026-07-04 09:48:24