Question

是否有可能使用CSS text-transform作为输入的占位符？我尝试过伪元素：

.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。也许您知道任何变通方法吗？

Answer 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 {

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

1 个答案: