CSS

:placeholder-shown

:placeholder-shown

这是一种实验技术

由于该技术的规范尚不稳定,请查看各种浏览器的兼容性表格以查阅使用说明。另外,还需要注意,随着规范的变化,实验技术的语法和行为在未来版本的浏览器中可能会发生变化。

该:placeholder-shown CSS伪类表示任何显示占位符文本的form元素。

/* Selects any <input> or <textarea> element with */ /* a placeholder attribute that is currently displaying */ /* the placeholder */ :placeholder-shown { border: 2px solid silver; }

语法

:placeholder-shown

实例

基本实例

HTML

<input placeholder="Type something here!">

CSS

input { border: 2px solid black; padding: 3px; } input:placeholder-shown { border-color: silver; }

结果

溢出文本

在智能手机等窄屏幕上,搜索框和其他表单字段的宽度可能会大大缩短。这可能会导致占位符文本以不希望的方式被裁剪,在这种情况下,用text-overflow属性改变这种行为通常是有用的。

HTML

<input placeholder="Enter something into this field, if you please!">

CSS

input:placeholder-shown { text-overflow: ellipsis; }

结果

规范

SpecificationStatusComment
Selectors Level 4The definition of ':placeholder' in that specification.Working DraftInitial definition.

浏览器兼容性

FeatureChromeFirefox (Gecko)Internet ExplorerEdgeOperaSafari
Basic support (on <input type="text">)47.051.0 (51.0)1No supportNo support234.09.0
on type="number", type="time", and similar?No supportNo supportNo support??

FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support (on <input type="text">)51.051.0 (51.0)1No supportNo support9.2
on type="number", type="time", and similar?No supportNo supportNo support?