首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

:placeholder-shown

这是一种实验技术

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

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

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

语法

代码语言:javascript
复制
:placeholder-shown

实例

基本实例

HTML

代码语言:javascript
复制
<input placeholder="Type something here!">

CSS

代码语言:javascript
复制
input {
  border: 2px solid black;
  padding: 3px;
}

input:placeholder-shown {
  border-color: silver;
}

结果

溢出文本

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

HTML

代码语言:javascript
复制
<input placeholder="Enter something into this field, if you please!">

CSS

代码语言:javascript
复制
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

?

扫码关注腾讯云开发者

领取腾讯云代金券

http://www.vxiaotou.com