在CSS中，我们可以通过::placeholder伪元素来选中输入框的默认提示文字，进而自定义其样式表现，让提示内容和页面整体设计风格保持一致。
::placeholder基本使用语法
::placeholder是CSS3新增的伪元素，专门用于匹配表单元素中placeholder属性对应的提示文本，使用时需要直接跟在输入框选择器之后，基本语法如下：
/* 选中所有输入框的提示文字 */
input::placeholder {
color: #999;
font-size: 14px;
font-family: "Microsoft YaHei", sans-serif;
}
也可以针对特定类型的输入框设置样式，比如只修改文本输入框的提示：
/* 只选中type为text的输入框提示 */
input[type="text"]::placeholder {
color: #666;
font-style: italic;
}
支持的样式属性
并不是所有CSS属性都能作用于::placeholder选中的元素，目前主流浏览器支持的可设置属性包括：
- 字体相关：
font-family、font-size、font-weight、font-style、line-height - 文本相关：
color、text-align、text-transform、letter-spacing - 背景相关：
background-color（部分浏览器支持）
需要注意的是，width、height、margin等盒模型属性无法对提示文字生效，因为这些属性作用于输入框本身，而非提示文本。
浏览器兼容处理
不同浏览器对::placeholder的实现前缀存在差异，为了保证兼容性，需要添加对应的浏览器前缀：
/* 兼容不同浏览器的写法 */
input::-webkit-input-placeholder { /* Chrome/Safari/Edge */
color: #999;
font-size: 14px;
}
input::-moz-placeholder { /* Firefox 19+ */
color: #999;
font-size: 14px;
opacity: 1; /* Firefox默认提示文字有透明度，需要手动重置 */
}
input:-ms-input-placeholder { /* IE 10+ */
color: #999;
font-size: 14px;
}
input::placeholder { /* 标准语法，放在最后 */
color: #999;
font-size: 14px;
}
其中Firefox的::placeholder默认会有0.5的透明度，如果需要完全显示颜色，必须手动设置opacity: 1。
常见美化场景示例
1. 修改提示文字颜色和大小
这是最常见的需求，将默认的灰色提示文字改为浅蓝色，同时调整字体大小：
.input-style::-webkit-input-placeholder {
color: #4a90e2;
font-size: 13px;
}
.input-style::-moz-placeholder {
color: #4a90e2;
font-size: 13px;
opacity: 1;
}
.input-style:-ms-input-placeholder {
color: #4a90e2;
font-size: 13px;
}
.input-style::placeholder {
color: #4a90e2;
font-size: 13px;
}
对应的HTML代码：
<input type="text" class="input-style" placeholder="请输入用户名">
2. 提示文字右对齐
部分场景下需要提示文字靠右显示，比如金额输入框：
.price-input::-webkit-input-placeholder {
text-align: right;
padding-right: 10px;
}
.price-input::-moz-placeholder {
text-align: right;
padding-right: 10px;
opacity: 1;
}
.price-input:-ms-input-placeholder {
text-align: right;
padding-right: 10px;
}
.price-input::placeholder {
text-align: right;
padding-right: 10px;
}
3. 添加提示文字图标
可以通过background属性给提示文字旁边添加小图标：
.icon-input::-webkit-input-placeholder {
background: url("icon.png") no-repeat left center;
background-size: 16px 16px;
padding-left: 22px;
}
.icon-input::-moz-placeholder {
background: url("icon.png") no-repeat left center;
background-size: 16px 16px;
padding-left: 22px;
opacity: 1;
}
.icon-input:-ms-input-placeholder {
background: url("icon.png") no-repeat left center;
background-size: 16px 16px;
padding-left: 22px;
}
.icon-input::placeholder {
background: url("icon.png") no-repeat left center;
background-size: 16px 16px;
padding-left: 22px;
}
注意事项
1.
::placeholder伪元素只能修改提示文字的样式，无法修改输入框本身的样式，输入框的边框、背景等需要单独设置。
2. 当输入框获得焦点时，提示文字会自动消失，不需要额外写JS代码控制。
3. 伪元素写法是::placeholder，部分旧资料可能用单冒号的:placeholder，单冒号是CSS2的伪类写法，虽然部分浏览器兼容，但建议使用标准的双冒号伪元素写法。
CSS::placeholder输入提示伪元素修改时间：2026-07-03 04:21:23