Input placeholder text-transform CSS styling

Question

Is it somehow possible to use CSS text-transform for input's placeholder? I've tried pseudo elements:

.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;
}

But it seems, that it works only in Mozilla. Maybe do you know any workarounds?

take a look at this, which will work for Chrome as well, but for IE it is not going to work, and you probably need to do some js stuff for implementing it yourself: davidwalsh.name/html5-placeholder-css — Aram
– Aram, Commented Dec 16, 2013 at 20:51
It works in Chrome as well but you'll need to remove the space between .user_info input and ::-webkit-input-placeholder - jsfiddle.net/t5SU6 - not sure about IE though. — Adrift
– Adrift, Commented Dec 16, 2013 at 20:54
Your code works in chrome too. Are you sure you're implementing it correctly? — Kevin Lynch
– Kevin Lynch, Commented Dec 16, 2013 at 20:55
As @Adrift posted, the problem was that additional space between input and colons. Honestly, wouldn't thought that it could be a cause. — Saulius s
– Saulius s, Commented Dec 16, 2013 at 21:01

JonathanR · Accepted Answer · 2013-12-16 20:56:07Z

1

This is how bootstrap handles it (and has worked well for me on my uses and tests):

.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;
}

You have some syntax issues that @Adrift noted, here is a recommended fix: input.user_info::-webkit-input-placeholder {

answered Dec 16, 2013 at 20:56

JonathanR

481 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Input placeholder text-transform CSS styling

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related