是否存在非前缀的输入占位符伪元素？

Question

我正在使用这个经典的代码片段来为输入框的占位文本添加样式：

::-webkit-input-placeholder { /* WebKit browsers */
  color: transparent;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: transparent;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: transparent;
}

:-ms-input-placeholder { /* Internet Explorer 10+ */
  color: transparent;
}

我看到了一个“标准”的例子，但无法确定是否真的存在。

例如https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-placeholder 包括以下示例：

input[placeholder] { text-overflow: ellipsis; }

但这个规则与:-moz-placeholder完全不同。选择任何具有占位符属性的输入，而不是占位符伪元素。

我还看到了关于::placeholder的引用https://css-tricks.com/almanac/selectors/p/placeholder/，但我无法确定它是否真实存在。

- pstenstrm

---

这个想法是，总有一天（很可能是等到天上掉下猪，地狱冻结），我们可以生活在没有“前缀”的世界里。 - somethinghere

https://github.com/mathiasbynens/jquery-placeholder不知道是否有帮助，但是这是链接。 - user4431269

Answer 1

据我所知，在这些实现开始出现的时候，并没有标准。每个供应商都在自己摸索。因此，要么是伪元素或伪类，要么像 Firefox 一样，从一个变成另一个会导致破坏性变化。

现在，我们有了完全不同且不兼容的许多实现，很难将它们合并为每个人都可以同意的标准。首先，伪元素和伪类执行完全不同的操作-从作者的角度来看，理想情况似乎是同时拥有伪类和伪元素：伪类用于样式化具有占位符文本的输入元素，而伪元素用于样式化占位符文本本身。不用说，当前的实现和文档也不一定符合这些期望。

好消息是，标准化过程已经启动，针对这两个问题都有：

• Selectors 4引入了:placeholder-shown伪类，用于匹配当前显示占位符文本的元素。
• Pseudo-Elements 4的FPWD引入了::placeholder伪元素，用于样式化占位符文本本身。

命名过程在这里记录。现在只需要等待几个月或几年，让供应商解决其余的问题。

- BoltClock