输入占位符文本转换 CSS 样式答案

【问题标题】：Input placeholder text-transform CSS styling输入占位符文本转换 CSS 样式
【发布时间】：2014-01-04 09:51:41
【问题描述】：

是否有可能使用 CSS 文本转换作为输入的占位符？我试过伪元素：

.user_info input ::-webkit-input-placeholder { /* WebKit browsers */
 text-transform:none;
}
.user_info input :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
 text-transform:none;
}
.user_info input::-moz-placeholder { /* Mozilla Firefox 19+ */
text-transform:none;
}
.user_info input:-ms-input-placeholder { /* Internet Explorer 10+ */
text-transform:none;
}

但它似乎只适用于 Mozilla。也许您知道任何解决方法？

【问题讨论】：

看看这个，它也适用于 Chrome，但对于 IE 就不行了，你可能需要自己做一些 js 的东西来实现它：davidwalsh.name/html5-placeholder-css
它也可以在 Chrome 中使用，但您需要删除 .user_info input 和 ::-webkit-input-placeholder - jsfiddle.net/t5SU6 之间的空格 - 虽然不确定 IE。
您的代码也适用于 chrome。您确定您正确实施了吗？
正如@Adrift 发布的那样，问题在于输入和冒号之间的额外空间。老实说，不会认为这可能是一个原因。

标签： javascript html placeholder css

【解决方案1】：

这就是 bootstrap 处理它的方式（并且在我的使用和测试中效果很好）：

.form-control:-moz-placeholder {
  color: #999999;
}
.form-control::-moz-placeholder {
  color: #999999;
  opacity: 1;
}
.form-control:-ms-input-placeholder {
  color: #999999;
}
.form-control::-webkit-input-placeholder {
  color: #999999;
}

@Adrift 指出您有一些语法问题，建议修复：input.user_info::-webkit-input-placeholder {

【讨论】：