13

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">

0

2 Respostas 2

16

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">

1
  • 1
    Comentar cada um dos seletores foi muito bom para a respsota +1 :)
    – Syzoth
    Commented 18/12/2015 às 18:50
13

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">

2
  • 1
    Troque -webkit-input-placeholder por ::-webkit-input-placeholder para que funcione no Chrome também. +1
    – abfurlan
    Commented 18/12/2015 às 18:43
  • 3
    @abfurlan É uma bagunça esse seletor, os browsers não concordam quanto ao nome, nem quanto à classificação como pseudo-classe ou pseudo-elemento. E agora decidiram voltar a tratar como pseudo-classe e mudar o nome para :placeholder-shown (que ninguém suporta ainda).
    – bfavaretto
    Commented 18/12/2015 às 21:06

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .