css - 在不影响占位符的情况下在 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+)