html - 如何组合文本转换 :uppercase with "normal" user text?

Question

我有一些带有占位符的输入和文本区域。

http://jsfiddle.net/k0o5k53s/

假设我希望这些占位符是大写的。我添加了“文本转换”属性并将其设置为“大写”。

.cool{
    width: 50%;
    text-transform: uppercase;
}

它有效，但现在所有用户文本也都是大写的。所以，我的问题是，如何将大写占位符与“普通”用户文本结合起来？我知道我们可以很容易地在 html 中键入大写的“MAIL”、“NAME”和“MESSAGE”，并删除文本转换，但我想知道，是否有一种方法可以在不更改 html 的情况下解决这个问题。

Answer 1

仅将大写应用于占位符:

.cool{
  width: 50%;
}

.cool::-webkit-input-placeholder {
  text-transform: uppercase;
}

.cool:-moz-placeholder { /* Firefox 18- */
   text-transform: uppercase;
}

.cool::-moz-placeholder {  /* Firefox 19+ */
  text-transform: uppercase;
}

.cool:-ms-input-placeholder {  
  text-transform: uppercase;  
}

jsfiddle