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

Question

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

我试图添加::first-letter 伪类来获得相同的结果。但是我的浏览器更新了一个，所以更改没有反射(reflect)在更新的浏览器中。

CSS:

.placeholder-ele-Casing{
  ::placeholder{
    text-transform: lowercase !important;
    &::first-letter{
      text-transform: uppercase !important;
    }
  }
  &::-webkit-input-placeholder{
    text-transform: lowercase !important;
    &::first-letter{
      text-transform: uppercase !important;
    }
  }
}

<input type='text' class='placeholder-ele-Casing' placeholder='Mobile Number' />

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

点赞这个'手机号码'。

但我只发现文本的小写转换..不是第一个字母元素...

Answer 1

你编译后的 CSS 会是这样的

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

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

::placeholder and ::first-letter both are pseudo elements, so you can't append the pseudo element after pseudo element while Pseudo-classes are allowed anywhere.

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

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

这会将“mobile number”转换为“Mobile Number”，但不适用于文本“mOBile number”，为此您需要 javascript。