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

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

我正在查看＆＃34;标准＆＃34;的示例，但无法判断是否确实存在。

例如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

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

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

好消息是标准化过程已经开始，这两个：

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

命名过程是here。现在剩下的就是等待几个月或几年让供应商弄清楚其余部分。