如何将 text-transform:uppercase 与 "normal" 用户文本结合起来？

Question

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

假设我希望这些占位符为大写。我添加 "text-tranform" 属性并将其设置为 "uppercase".

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

它有效，但现在所有用户文本也都是大写的。所以，我的问题是，如何将大写占位符与 "normal" 用户文本结合起来？我知道我们可以很容易地在 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

如何将 text-transform:uppercase 与 "normal" 用户文本结合起来？

How to combine text-transform:uppercase with "normal" user text?

html

css

input

textarea

uppercase