这篇翻译不完整。请帮忙从英语翻译这篇文章

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

:placeholder-shown CSS 伪类 在 <input><textarea> 元素显示 placeholder text 时生效.

/* 选择所有显示占位符(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;
}

结果

规范

Specification Status Comment
Selectors Level 4
:placeholder-shown
Working Draft Initial definition.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic support
Experimental
Chrome Full support 47Edge No support No
Notes
No support No
Notes
Notes This feature is not implemented. See this enhancement request.
Firefox Full support 51
Full support 51
No support 4 — 51
Alternate Name
Alternate Name Uses the non-standard name: :-moz-placeholder
IE Full support 10
Alternate Name
Full support 10
Alternate Name
Alternate Name Uses the non-standard name: :-ms-input-placeholder
Opera Full support 34Safari Full support 9WebView Android Full support 51Chrome Android ? Edge Mobile No support No
Notes
No support No
Notes
Notes This feature is not implemented. See this enhancement request.
Firefox Android Full support 51
Full support 51
No support 4 — 51
Alternate Name
Alternate Name Uses the non-standard name: :-moz-placeholder
Opera Android ? Safari iOS Full support 9.2Samsung Internet Android ?
Support on non-type="text" elements (such as type="number" or type="time")
Experimental
Chrome ? Edge No support NoFirefox Full support YesIE No support NoOpera ? Safari Full support YesWebView Android ? Chrome Android ? Edge Mobile No support NoFirefox Android Full support YesOpera Android ? Safari iOS Full support YesSamsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.
Uses a non-standard name.
Uses a non-standard name.

参见

文档标签和贡献者

此页面的贡献者: LoveofRedMoon
最后编辑者: LoveofRedMoon,