在CSS中使输入值为大写而不影响占位符

Question

有没有办法让输入值大写而不使占位符大写？

好像我得到了一个或另一个。我更喜欢只使用CSS（JS最后手段）干净利落地完成这项工作。

Answer 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 +）

Answer 2

我知道您说过使用JS是不得已的方法，但是在这种情况下，它可能更有效，更简单（如果您不使用JS，则发给frorm提交的值将不会大写），所以这可能更好需要CSS：

<input oninput="this.value = this.value.toUpperCase()" placeholder="Enter Drivers License #" />