如何在CSS中实现输入框占位符样式_通过::placeholder设置文字颜色和大小

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

如何在CSS中实现输入框占位符样式_通过::placeholder设置文字颜色和大小

2025-11-25

浏览次数：次

返回列表

使用::placeholder伪元素可设置输入框占位符的样式，如颜色和字体大小，需注意浏览器兼容性及透明度问题，建议添加厂商前缀以支持旧版浏览器，同时保证可读性和无障碍设计。

如何在css中实现输入框占位符样式_通过::placeholder设置文字颜色和大小

在CSS中，可以通过::placeholder伪元素来设置输入框（input）或文本区域（textarea）的占位符文字样式，包括颜色、字体大小等。这个伪元素专门用于控制占位符的外观，让页面表单更具可读性和美观性。

使用::placeholder设置占位符样式

::placeholder是现代浏览器支持的伪元素，可以直接为其添加样式规则。以下是如何设置占位符的颜色和字体大小：

input::placeholder {
  color: #999;
  font-size: 14px;
  opacity: 1; /* 防止某些浏览器降低透明度 */
}

上面的代码将输入框的占位符文字颜色设为浅灰色，字体大小为14像素，并确保其不被默认透明度影响。

兼容不同浏览器的写法

由于浏览器前缀差异，为了保证兼容性，建议同时使用带前缀的伪元素版本：

语鲸

AI智能阅读辅助工具

314 查看详情

/* WebKit, Blink, Edge */
input::-webkit-input-placeholder {
  color: #999;
  font-size: 14px;
}
<p>/<em> Mozilla Firefox 19+ </em>/
input::-moz-placeholder {
color: #999;
font-size: 14px;
opacity: 1;
}</p><p>/<em> Mozilla Firefox older versions </em>/
input:-moz-placeholder {
color: #999;
font-size: 14px;
opacity: 1;
}</p><p>/<em> Internet Explorer 10+ </em>/
input:-ms-input-placeholder {
color: #999;
font-size: 14px;
}</p><p>/<em> 标准语法 </em>/
input::placeholder {
color: #999;
font-size: 14px;
opacity: 1;
}</p>