Is it possible to create an input uppercase and keep the placeholder in lowercase only in CSS?

Asked

Viewed 2,975 times

13

How can I leave my placeholder in lowercase and my text in uppercase in css?

I’ve tried to: 

input {
  text-transform: uppercase;
}
<input type="text" placeholder="usuário">

css

2 answers

16


Since it is a property of CSS3 each browser has implemented in a way this selector, then you have to use the prefix vendor.

input {
  text-transform: uppercase;
}

::-webkit-input-placeholder { /* Chrome, Safari */
  text-transform: lowercase;
}


:-moz-placeholder { /* Firefox 18- */
   text-transform: lowercase; 
}

::-moz-placeholder {  /* Firefox 19+ */
   text-transform: lowercase;
}

:-ms-input-placeholder {  /* IE */
   text-transform: lowercase; 
}
<input type="text" placeholder="usuário">

  • 1

    Commenting on each of the selectors was very good for respsota +1 :)

13

Try it like this

input {
  text-transform: uppercase;
}
::-webkit-input-placeholder {
  text-transform: lowercase;
}
:-moz-placeholder {
  text-transform: lowercase;
}
::-moz-placeholder {
  text-transform: lowercase;
}

:-ms-input-placeholder {
   text-transform: lowercase; 
}
<input type="text" placeholder="usuário">

  • 1

    Change -webkit-input-placeholder for ::-webkit-input-placeholder to work on Chrome as well. + 1

  • 3

    @abfurlan It is a mess this selector, browsers do not agree on the name, nor on the classification as pseudo-class or pseudo-element. And now they’ve decided to go back to treating it as a pseudo-class and rename for :placeholder-shown (that no one can stand yet).

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.