css ::placeholder与::placeholder-shown有何区别-css教程-PHP中文网

css ::placeholder与::placeholder-shown有何区别

P粉602998670

发布： 2025-10-08 19:48:02

原创

238人浏览过

::placeholder 用于设置占位符文本样式，如颜色和字体；::placeholder-shown 用于判断输入框是否显示占位符，并对输入框整体应用样式，两者结合可实现智能表单交互。

css ::placeholder与::placeholder-shown有何区别

::placeholder 和 ::placeholder-shown 是两个不同的 CSS 伪类或伪元素，虽然名字相似，但用途和行为完全不同。

用于选中表单元素（如 input 或 textarea）中显示的占位符文本，可以单独设置它的样式。

示例：

有道小P

有道小P，新一代AI全科学习助手，在学习中遇到任何问题都可以问我。

input::placeholder {
  color: #999;
  font-style: italic;
}

登录后复制

用于选中当前正在显示 placeholder 的输入框元素本身，而不是文本。

示例：

input:placeholder-shown {
  border: 2px solid #ccc;
}

input:not(:placeholder-shown) {
  border: 2px solid #4CAF50;
}

登录后复制

基本上就这些。简单说：::placeholder 样式化提示文字，而 ::placeholder-shown 判断输入框是否处于“显示占位符”的状态，并对整个输入框应用样式。两者配合使用能实现更智能的表单交互效果。不复杂但容易忽略区别。

以上就是css ::placeholder与::placeholder-shown有何区别的详细内容，更多请关注php中文网其它相关文章！

大家都在看：