是否有非前缀输入占位符伪元素？

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;
}

我看到了 "standard" 的示例，但无法确定是否真的存在。

例如 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/ 的引用但我不知道它是否真的存在。

Answer 1

据我所知，这些实现开始出现时还没有标准。每个供应商都在自己想办法。因此，伪元素或伪classes，或者在 Firefox 的情况下，从一个到另一个的重大变化。

现在我们有一堆完全不同且不兼容的实现，可以理解很难将它们融合成一个每个人都能同意的标准。对于初学者来说，伪元素和伪 class 做完全不同的事情——从作者的角度来看，理想的情况似乎是 both：一个伪class 用于设置具有占位符文本的输入元素的样式，以及用于设置占位符文本本身样式的伪元素。不用说，当前的实现和文档也不一定符合这些期望。

好消息是标准化过程已经开始，因为这些东西：

Selectors 4 introduces a :placeholder-shown pseudo-class 用于匹配当前显示所述占位符文本的带有占位符文本的元素
The FPWD of Pseudo-Elements 4 introduces a ::placeholder pseudo-element 用于设置占位符文本本身的样式

命名过程被记录下来here。现在剩下的就是等待几个月或几年让供应商解决剩下的问题。

是否有非前缀输入占位符伪元素？

Is there a non-prefixed input placeholder pseudo-element?

html

css

standards