在CSS中将输入值转换为大写，而不影响占位符。

Question

有没有一种方法可以使输入值大写而不使占位符大写？

看起来我只能得到其中之一。我更喜欢只使用CSS（JS是最后的手段）来干净地完成这个任务。

- kaleazy

---

将您当前的代码放入一个fiddle中，并在您的问题中展示HTML/CSS。 - misterManSam

请查看此页面：https://dev59.com/QHE85IYBdhLWcg3wyGt_ - MujtabaFR

如果占位符使用小写，用户输入的值会显示为大写，这会让Lol用户感到困惑。 - vusan

Answer 1

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

jsBin示例。

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+)

- Sander Koedood

---

@ShyamBabuKushwaha - 对我来说看起来不错。只需按正确的顺序排列属性即可。CSS 101 :) - misterManSam

我已经修改了你的答案，因为我们知道它是可行的，并且加入了 jsBin 的链接 :) - misterManSam

工作得非常好。在开发iPhone 6并忘记检查iPhone 5时，很容易修复。 - Mike Purcell

关于 :-ms-input-placeholder 的一点说明。我不得不在它上面加上 !important 标志，以便IE 11可以正确地呈现它。我还没有在其他版本上尝试过。 - Trevor.Screws

我刚在IE11中测试了它，它完全正常。我认为你有另一个CSS语句覆盖了占位符的样式。如果你愿意，你可以在jsbin / jsfiddle上重现你遇到的问题，我会看一下的。 - Sander Koedood

现如今，input::placeholder { text-transform: none; } 应该被添加到代码中，因为它得到了广泛的支持。详情请参考：https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder - Dem Pilafian

Answer 2

我知道你说尽量避免使用JS，但在这种情况下，它可能更有效和更简单（如果你不使用JS，表单提交时的值将不会大写），所以这可能是更好的选择，不需要额外的CSS：

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

编辑

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

<input oninput="let p = this.selectionStart; this.value = this.value.toUpperCase();this.setSelectionRange(p, p);" />

- Yehuda Schwartz