文本转换：大写；也会影响占位符

Posted 2023-02-21

【中文标题】文本转换：大写；也会影响占位符

【英文标题】：text-transform: capitalize; Also affects Placeholder

【发布时间】：2014-04-20 08:05:02

【问题描述】：

我有以下简单的输入。

<input type="text" placeholder="What is your username?" />

当我使用text-transform: capitalize; 将每个单词的第一个字母大写时，占位符也会大写：What Is Your Username?

如何保持占位符不变？

【参考方案1】：

您可以设置占位符的样式--

::-webkit-input-placeholder 
   text-transform: initial;


:-moz-placeholder  
   text-transform: initial;


::-moz-placeholder   
   text-transform: initial;


:-ms-input-placeholder  
   text-transform: initial;

【讨论】：

虽然initial 的值为is not supported in IE，但您可以改用lowercase 的值。

@HashemQolami 是的，这只是如何将占位符与输入分开设置样式的示例：)