Como posso deixar o meu placeholder em lowercase e meu texto em uppercase em css?
Já tentei:
input {
text-transform: uppercase;
}
<input type="text" placeholder="usuário">
Como é uma propriedade do CSS3 cada browser implementou de uma forma esse seletor, aí você tem que usar os 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">
Tente assim
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">
-webkit-input-placeholder
por ::-webkit-input-placeholder
para que funcione no Chrome também. +1
:placeholder-shown
(que ninguém suporta ainda).
Commented
18/12/2015 às 21:06