HTML如何设置占位显示样式？placeholder-shown伪类的用法是什么？-html教程-PHP中文网

HTML如何设置占位显示样式？placeholder-shown伪类的用法是什么？

小老鼠

发布： 2025-08-18 20:20:02

原创

509人浏览过

答案：:placeholder-shown伪类可在输入框显示占位符时设置样式，支持颜色、字体、边框等样式控制，并通过JavaScript模拟实现兼容性处理。

html如何设置占位显示样式？placeholder-shown伪类的用法是什么？

HTML中设置占位显示样式，主要靠

:placeholder-shown

登录后复制

这个伪类。它允许你在 input 或 textarea 元素显示 placeholder 文本时，应用特定的样式。这让你可以更精细地控制用户未输入内容时的视觉效果，提升用户体验。

解决方案：

:placeholder-shown

登录后复制

伪类只有在 input 或 textarea 元素显示 placeholder 属性时才会被激活。这意味着你可以改变文本颜色、背景色、字体大小等等，来突出显示 placeholder，或者在用户开始输入后，将样式恢复到默认状态。

例如，你可以让 placeholder 文本显示为浅灰色，并在用户开始输入时，将文本颜色变为黑色。

立即学习“前端免费学习笔记（深入）”；

input::placeholder {
  color: lightgray;
}

input:not(:placeholder-shown) {
  color: black;
}

登录后复制

这个例子中，

input::placeholder

登录后复制

选择器设置了 placeholder 文本的默认颜色为浅灰色。

:not(:placeholder-shown)

登录后复制

伪类选择器则会在 input 元素不再显示 placeholder 文本时（即用户开始输入时）应用样式，这里将文本颜色设置为黑色。

除了颜色，你还可以修改其他样式，比如字体大小、背景颜色、边框等等。

input::placeholder {
  font-style: italic;
  opacity: 0.7;
}

input:not(:placeholder-shown) {
  font-style: normal;
  opacity: 1;
}

登录后复制

这段代码让 placeholder 文本显示为斜体，并降低了透明度。当用户开始输入时，字体样式恢复正常，透明度也变为 1。

需要注意的是，并非所有浏览器都完全支持

:placeholder-shown

登录后复制

伪类。虽然现代浏览器基本都支持，但为了兼容老版本浏览器，你可能需要使用一些 JavaScript 方案作为备选方案。例如，你可以监听 input 元素的

input

登录后复制

事件，并根据输入框的值是否为空来动态添加或移除 CSS 类。

const inputElement = document.querySelector('input');

inputElement.addEventListener('input', () => {
  if (inputElement.value === '') {
    inputElement.classList.add('placeholder-visible');
  } else {
    inputElement.classList.remove('placeholder-visible');
  }
});

登录后复制

然后，在 CSS 中，你可以使用

.placeholder-visible

登录后复制

类来应用 placeholder 显示时的样式。

input::placeholder {
  color: lightgray;
}

input.placeholder-visible {
  color: lightgray; /* 兼容不支持 :placeholder-shown 的浏览器 */
}

input:not(.placeholder-visible) {
  color: black;
}

登录后复制

这样，即使在不支持

:placeholder-shown

登录后复制

的浏览器中，也能实现类似的占位显示效果。

Poe

Quora旗下的对话机器人聚合工具

607

查看详情

:placeholder-shown

登录后复制

的兼容性如何？

现代浏览器，包括 Chrome、Firefox、Safari 和 Edge，都支持

:placeholder-shown

登录后复制

伪类。然而，一些老版本的浏览器可能不支持。为了确保你的网站在各种浏览器上都能正常工作，最好进行兼容性测试，并在必要时提供备选方案，比如上面提到的 JavaScript 方法。

如何使用 JavaScript 模拟

:placeholder-shown

登录后复制

行为？

如果需要更全面的兼容性，可以使用 JavaScript 来模拟

:placeholder-shown

登录后复制

的行为。这通常涉及到监听 input 元素的

focus

登录后复制

和

blur

登录后复制

事件，以及检查 input 元素的值是否为空。

const inputElement = document.querySelector('input');

inputElement.addEventListener('focus', () => {
  inputElement.classList.remove('placeholder-visible');
});

inputElement.addEventListener('blur', () => {
  if (inputElement.value === '') {
    inputElement.classList.add('placeholder-visible');
  }
});

// 初始状态检查
if (inputElement.value === '') {
  inputElement.classList.add('placeholder-visible');
}

登录后复制

这段代码在 input 元素获得焦点时移除

placeholder-visible

登录后复制

类，在失去焦点且值为空时添加该类。初始状态也进行了检查，确保在页面加载时 placeholder 样式正确显示。这种方法虽然稍微复杂一些，但可以提供更广泛的浏览器兼容性。

除了颜色，

:placeholder-shown

登录后复制

还能控制哪些样式？

:placeholder-shown

登录后复制

伪类不仅可以控制文本颜色，还可以控制许多其他的 CSS 属性，例如字体大小、字体样式、背景颜色、边框等等。这让你能够创建各种各样的占位显示效果。

例如，你可以让 placeholder 文本显示为斜体，并添加一个虚线边框。

input::placeholder {
  font-style: italic;
  border: 1px dashed gray;
}

input:not(:placeholder-shown) {
  font-style: normal;
  border: none;
}

登录后复制

这段代码让 placeholder 文本显示为斜体，并添加了一个灰色的虚线边框。当用户开始输入时，字体样式恢复正常，边框也会被移除。你可以根据自己的需求，自由组合各种 CSS 属性，创造出独特的占位显示效果。

以上就是HTML如何设置占位显示样式？placeholder-shown伪类的用法是什么？的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

html怎么在浏览器上运行php文件_浏览器运html中php文件方法【教程】 html5怎么在浏览器上运行_html5浏览器运行配置【教程】 html代码写好了怎么运行文件_运行写好的html代码文件【指南】 html怎么用浏览器运行php文件_浏览器运html中php文件步骤【教程】 vs2019怎么运行html网页_vs2019运行html网页步骤【指南】