css伪元素::placeholder是专门用于设置输入框占位符文字样式的伪元素，它可以作用于input、textarea等支持placeholder属性的表单元素，让默认的占位符提示文字拥有自定义的视觉效果，解决浏览器默认样式和页面设计不匹配的问题。
::placeholder基础使用语法
使用::placeholder伪元素时，需要把它附加在对应的表单元素选择器后面，然后设置需要的样式属性即可。需要注意的是，只有元素本身设置了placeholder属性，这个伪元素才会生效。
下面是一个最基础的使用示例，给输入框的占位符设置灰色文字和14px的字体大小：
/* 选择所有input元素的占位符 */
input::placeholder {
color: #999999;
font-size: 14px;
}
/* 给特定类名的输入框设置占位符样式 */
.custom-input::placeholder {
color: #666666;
font-style: italic;
}
支持的样式属性
不是所有css属性都可以用在::placeholder伪元素上，目前主流浏览器支持的设置属性主要有以下几类：
- 字体相关：
font-family、font-size、font-weight、font-style、line-height - 文本相关：
color、text-align、text-transform、letter-spacing - 背景相关：
background-color（部分浏览器支持） - 透明度：
opacity
下面是一个设置多属性的示例：
textarea::placeholder {
color: #aaaaaa;
font-size: 13px;
text-align: center;
opacity: 0.8;
letter-spacing: 1px;
}
浏览器兼容处理
不同浏览器对::placeholder的支持前缀有差异，旧版本浏览器需要使用带前缀的写法才能保证样式生效，常见的兼容写法如下：
/* 兼容不同浏览器 */
input::-webkit-input-placeholder { /* Chrome/Safari/Edge */
color: #999999;
}
input::-moz-placeholder { /* Firefox 4-18 */
color: #999999;
opacity: 1; /* Firefox默认占位符有透明度，需要重置 */
}
input::-moz-placeholder { /* Firefox 19+ */
color: #999999;
opacity: 1;
}
input:-ms-input-placeholder { /* IE 10-11 */
color: #999999;
}
input::-ms-input-placeholder { /* Edge旧版本 */
color: #999999;
}
/* 标准写法放在最后 */
input::placeholder {
color: #999999;
}
使用注意事项
在使用::placeholder伪元素时，有几个常见的注意点需要规避：
- 不要给占位符设置
display、position等布局类属性，这些属性在伪元素上不会生效 - Firefox浏览器默认会给占位符添加透明度，如果需要纯色效果，要手动设置
opacity: 1 ::placeholder伪元素只能修改占位符的样式，不能修改占位符的内容，内容需要在html的placeholder属性中定义- 如果输入框设置了
disabled或者readonly属性，占位符的样式依然会生效，不会受到影响
完整示例
下面是一个包含html和css的完整示例，展示不同输入框的占位符样式效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.base-input {
width: 300px;
height: 40px;
padding: 0 10px;
margin: 10px 0;
border: 1px solid #cccccc;
border-radius: 4px;
}
/* 普通输入框占位符 */
.base-input::placeholder {
color: #999999;
font-size: 14px;
}
/* 搜索框占位符 */
.search-input::placeholder {
color: #666666;
font-style: italic;
text-align: center;
}
/* 多行文本框占位符 */
.content-textarea::placeholder {
color: #aaaaaa;
font-size: 13px;
line-height: 30px;
}
</style>
</head>
<body>
<input type="text" class="base-input" placeholder="请输入用户名">
<input type="search" class="base-input search-input" placeholder="搜索内容">
<textarea class="base-input content-textarea" rows="4" placeholder="请输入内容描述"></textarea>
</body>
</html>
通过这个示例可以看到，不同的输入框可以根据需求设置不同的占位符样式，让页面的表单区域视觉效果更统一。实际开发中可以根据设计稿的要求，灵活调整::placeholder的样式属性，实现更贴合需求的提示效果。
css::placeholder伪元素input_placeholder修改时间：2026-07-06 21:21:29