在CSS中使输入值大写而不影响占位符 [英] Make input value uppercase in CSS without affecting the placeholder

问题描述

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

Is there a way I can make an input value uppercase without making the placeholder uppercase?

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

Seems like I get one or the other. I'd prefer to do this cleanly just using CSS (JS last resort).

推荐答案

每个浏览器引擎都有不同的实施方式来控制占位符样式。使用以下操作：

Each browser engine has a different implementation to control placeholder styling. Use the following:

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;
}

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

Needless to say, this only works in browsers that can handle placeholders. (IE9/10+)

这篇关于在CSS中使输入值大写而不影响占位符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！