时间戳

首页 > 解决方案 > HTML 输入占位符，第一个字母 CSS 更改不适用于更新的浏览器

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

问题描述

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

我试图添加 ::first-letter 伪类来获得相同的结果。但是我的浏览器已更新，因此更改不会在此处更新的浏览器中反映出来。

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' />

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

喜欢这个“手机号码”。

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

标签： htmlcsscss-selectors

解决方案

你编译的 CSS 会像

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

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

::placeholder并且::first-letter两者都是伪元素，因此您不能在伪元素之后附加伪元素，而在任何地方都允许使用伪类。

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

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

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

推荐阅读