在 CSS 中将输入值设为大写而不影响占位符答案

【问题标题】：Make input value uppercase in CSS without affecting the placeholder在 CSS 中将输入值设为大写而不影响占位符
【发布时间】：2014-09-30 13:18:42
【问题描述】：

有没有一种方法可以在不将占位符设为大写的情况下将输入值设为大写？

似乎我得到了一个或另一个。我宁愿只使用 CSS（JS 最后的手段）干净地做到这一点。

【问题讨论】：

将您当前的代码弹出到小提琴中并在您的问题中显示 HTML/CSS。
看看这个页面stackoverflow.com/questions/2610497/…
如果占位符是小写的并且他们输入的值会以大写显示，Lol 用户会感到困惑。

标签： css uppercase

【解决方案1】：

每个浏览器引擎都有不同的实现来控制placeholder 样式。使用以下内容：

jsBin example.

input { 
    text-transform: uppercase;
}
::-webkit-input-placeholder { /* WebKit browsers */
    text-transform: none;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    text-transform: none;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    text-transform: none;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    text-transform: none;
}
::placeholder { /* Recent browsers */
    text-transform: none;
}

不用说，这只适用于可以处理占位符的浏览器。 (IE9/10+)

【讨论】：

@ShyamBabuKushwaha - Seems fine to me。只需按正确的顺序排列属性。 CSS 101 :)
我改写了你的答案，因为我们知道它有效，并添加了 jsBin 链接:)
工作得很棒。在 iphone6 上开发并忘记检查 iphone 5 时轻松修复。
关于 :-ms-input-placeholder 的快速说明。我必须在其上包含 !important 标志，以便 IE 11 正确呈现它。我没有在其他版本上尝试过。
现在应该添加input::placeholder { text-transform: none; }，因为它得到了很好的支持。详情：developer.mozilla.org/en-US/docs/Web/CSS/::placeholder

【解决方案2】：

我知道你说使用 JS 是最后的手段，但是在这种情况下，它可能更有效和更简单（如果你不使用 JS，你在 fromrm submit 上发布的值不会是大写的）所以这可能会更好需要 CSS：

&lt;input oninput="this.value = this.value.toUpperCase()" placeholder="Enter Drivers License #" /&gt;

编辑

有些人一直抱怨编辑值时光标跳到末尾，所以这个稍微扩展的版本应该可以解决这个问题

&lt;input oninput="let p = this.selectionStart; this.value = this.value.toUpperCase();this.setSelectionRange(p, p);" /&gt;

【讨论】：