如何组合文本转换：大写与＆＃34;普通＆＃34;用户文字？

Question

我有一些输入和textarea与占位符。

http://jsfiddle.net/k0o5k53s/

让我们说我希望这些占位符是大写的。我添加＆＃34; text-tranform＆＃34;属性并将其设置为＆＃34;大写＆＃34;。

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

它可以工作，但现在所有用户文本也都是大写的。所以，我的问题是，如何将占位符以大写字母与＃34; normal＆＃34;用户文字？我知道我们可以轻松输入大写＆＃34; MAIL＆＃34;，＆＃34; NAME＆＃34;和＆＃34; MESSAGE＆＃34;在html中，并删除文本转换，但我想知道，如果有办法解决这个问题而不改变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