CSS参考手册
选择 | Selectors
: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;
}
结果
规范
Specification |
Status |
Comment |
---|---|---|
Selectors Level 4The definition of ':placeholder' in that specification. |
Working Draft |
Initial definition. |
浏览器兼容性
Feature |
Chrome |
Firefox (Gecko) |
Internet Explorer |
Edge |
Opera |
Safari |
---|---|---|---|---|---|---|
Basic support (on <input type="text">) |
47.0 |
51.0 (51.0)1 |
No support |
No support2 |
34.0 |
9.0 |
on type="number", type="time", and similar |
? |
No support |
No support |
No support |
? |
? |
Feature |
Android |
Firefox Mobile (Gecko) |
IE Mobile |
Opera Mobile |
Safari Mobile |
---|---|---|---|---|---|
Basic support (on <input type="text">) |
51.0 |
51.0 (51.0)1 |
No support |
No support |
9.2 |
on type="number", type="time", and similar |
? |
No support |
No support |
No support |
? |
选择 | Selectors相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。