::placeholder 用于设置占位符文本样式，如颜色和字体；::placeholder-shown 用于判断输入框是否显示占位符，并对输入框整体应用样式，两者结合可实现智能表单交互。
::placeholder 和 ::placeholder-shown 是两个不同的 CSS 伪类或伪元素，虽然名字相似，但用途和行为完全不同。
::placeholder（伪元素）
用于选中表单元素（如 input 或 textarea）中显示的占位符文本，可以单独设置它的样式。作用对象是 placeholder 文本本身，比如输入框里的“请输入内容”提示文字 属于伪元素，用法类似 ::before 或 ::after 可以设置颜色、字体、透明度等文本样式 浏览器支持需加前缀以确保兼容性（如 ::-webkit-input-placeholder）
示例：
稿定抠图
AI自动消除图片背景
76 查看详情
input::placeholder { color: #999; font-style: italic;}
::placeholder-shown（伪类）
用于选中当前正在显示 placeholder 的输入框元素本身，而不是文本。是一个动态伪类，当输入框为空且有 placeholder 时生效 一旦用户输入内容，该伪类就不再匹配 常用于根据是否显示 placeholder 来切换输入框的整体样式 适合做表单状态判断，比如空输入时加边框提示
示例：
input:placeholder-shown { border: 2px solid #ccc;}input:not(:placeholder-shown) { border: 2px solid #4CAF50;}
基本上就这些。简单说：::placeholder 样式化提示文字，而 ::placeholder-shown 判断输入框是否处于“显示占位符”的状态，并对整个输入框应用样式。两者配合使用能实现更智能的表单交互效果。不复杂但容易忽略区别。
以上就是css ::placeholder与::placeholder-shown有何区别的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1024246.html
微信扫一扫 
支付宝扫一扫 
