文章/答案/技术大牛

发布

社区首页 >问答首页 >HTML输入占位符，首字母CSS更改不适用于更新的浏览器

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

Stack Overflow用户

提问于 2018-12-28 15:50:29

回答 3查看 909关注 0票数 0

我将css应用于输入占位符中的第一个字母

我尝试添加：：第一个字母的伪类来获得相同的结果。但是我的浏览器已经更新了一次，所以更新后的浏览器中没有反映出变化。

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

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

比如这个“手机号”。

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

css

css-selectors

html

回答 3

Stack Overflow用户

发布于 2018-12-28 17:03:44

编译后的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;
}

它会将“手机号码”转换成“手机号码”，但不会对文本"mobile Number“起作用，要实现这一点你需要javascript。

票数 1

Stack Overflow用户

发布于 2018-12-28 16:03:50

使用此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;

}

票数 0

Stack Overflow用户

发布于 2020-10-20 23:42:57

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

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/53955279

复制

相似问题

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

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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