HTML输入占位符，第一个字母CSS更改不适用于更新的浏览器

我正在为输入占位符中的第一个字母应用css

我尝试添加：：first-letter伪类以获得相同的结果。但我的浏览器是更新的，所以更改不会反映在更新的浏览器中

CSS:

.placeholder电气套管{
：：占位符{
文本转换：小写！重要；
&：：第一个字母{
文本转换：大写！重要；
}
}
&：-webkit输入占位符{
文本转换：小写！重要；
&：：第一个字母{
文本转换：大写！重要；
}
}
}

这里我使用了占位符来获得正确的句子大小写

就像这个“手机号码”

但我只找到了文本的小写转换。。不是第一个字母元素

使用此CSS代码

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
      text-transform: initial;

}
::-moz-placeholder { /* Firefox 19+ */
    text-transform: initial;

}
:-ms-input-placeholder { /* IE 10+ */
    text-transform: initial;
}
:-moz-placeholder { /* Firefox 18- */
    text-transform: initial;

}

---

您编译的CSS将如下所示

.placeholder-ele-Casing::placeholder {
  text-transform: lowercase !important;
} 

.placeholder-ele-Casing::placeholder::first-letter { /*will not work*/
  text-transform: uppercase !important;
}

：：占位符

和

：：第一个字母

都是伪元素，因此 在运行期间，无法在伪元素之后追加伪元素 任何地方都允许使用伪类

因此，要使第一个字母大写，您可以使用

.placeholder-ele-Casing::placeholder {
  text-transform: capitalize;
} 

---

它将“手机号”转换为“手机号”，但不适用于文本“手机号”，要实现这一点，您需要javascript。

您可以使用占位符初始样式

.placeholder-ele-Casing {
  text-transform: lowercase;
}

&::placeholder{
  text-transform: initial;
}

---

谢谢你的回复。如果它不能像你说的那样工作。。。那么，如何在占位符输入上应用第一个字母css呢。等待回复。正如我在回答的最后一行中提到的，要实现这一点需要JavaScript。如果你愿意，我会为同样的内容添加JavaScript代码。是的，如果可能的话，尝试搜索css的占位符和第一个字母伪类。强烈推荐阅读。这个第一个字母的伪类不适用于更新的浏览器。我知道这两个伪元素，第一个字母以前是伪类，现在是伪元素。但目前它不适用于更新的chrome浏览器

：：第一个字母

的伪类元素

：：占位符

试着理解，我所说的全部是输入占位符文本，并将

：：第一个字母

伪类应用到其中。但这并不仅仅是因为它被弃用才起作用。谢谢@MohcinBN这里我的用例是不同的。。。第一个字母伪类在新浏览器中被弃用。如果找到了，请告诉我路。

.placeholder-ele-Casing {
  text-transform: lowercase;
}

&::placeholder{
  text-transform: initial;
}