是否有无前缀输入占位符伪元素？答案

【问题标题】：Is there a non-prefixed input placeholder pseudo-element?是否有无前缀输入占位符伪元素？
【发布时间】：2015-10-05 22:04:54
【问题描述】：

我正在使用这个旧的 sn-p 来设置输入占位符文本的样式：

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

【问题讨论】：

我们的想法是，也许有一天，当猪飞起来，地狱结冰的时候，我们可以生活在一个没有prefixes的世界里。
github.com/mathiasbynens/jquery-placeholder 不知道有没有用，你来了

标签： html css standards

【解决方案1】：

AFAIK 在这些实施开始出现时并没有标准。每个供应商都在自己解决这个问题。因此，无论是伪元素还是伪类，或者在 Firefox 的情况下，从一个到另一个的重大变化。

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

好消息是标准化过程已经开始，有以下两种情况：

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

命名过程记录在here。现在剩下的就是等待几个月或几年，让供应商弄清楚剩下的事情。

【讨论】：