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

Navigation
13

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

I've tried: 

input {
  text-transform: uppercase;
}
<input type="text" placeholder="usuário">
    
asked by anonymous 18.12.2015 / 19:31

2 answers

15

As a property of CSS3 each browser has implemented this selector in a way, there you have to use the vendor prefix. 

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">
    
18.12.2015 / 19:37
13

Try this way 

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">
    
18.12.2015 / 19:38
Performance Webpack Build.js Using lower () in a list of lists in Python