1

Como faço para aumentar o tamanho da palavra, valor do atributo placeholder da tag input do tipo texto?

<input type="text" name="login" placeholder="Login" required id="login">

inserir a descrição da imagem aqui

3 Respostas 3

4

Opção onFocus e onBlur:

function change() {
  document.getElementById('login').placeholder = 'Alterado';
}

function changeBack() {
  document.getElementById('login').placeholder = 'Login';
}
input {
  padding: 12px;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  font-size: 16px;
}
::-moz-placeholder { /* Firefox 19+ */
  font-size: 16px;
}
:-ms-input-placeholder { /* IE 10+ */
  font-size: 16px;
}
:-moz-placeholder { /* Firefox 18- */
  font-size: 16px;
}

input:focus::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  font-size: 20px;
}

input:focus::-moz-placeholder { /* Firefox 19+ */
  font-size: 20px;
}
input:focus:-ms-input-placeholder { /* IE 10+ */
  font-size: 20px;
}
input:focus:-moz-placeholder { /* Firefox 18- */
  font-size: 20px;
}
<input type="text" onFocus="change()" onBlur="changeBack()" name="login" placeholder="Login" required id="login">

1
2

Pode ser feito com CSS, a sintaxe muda a depender do navegador. Segue exemplo:

<!DOCTYPE html>
<html>
  <head>
    <style>
      input:-ms-input-placeholder  {
        font-size:16px;
      }

      input::-webkit-input-placeholder {
        font-size:16px;
      }

      input:-moz-placeholder {
        font-size:16px;
      }

 /* firefox 19+ */
      input::-moz-placeholder {
        font-size:16px;
      }
    </style>
  </head>
<body>
  <form action="demo_form.asp">
    <input type="text" name="login" placeholder="Login" required id="login">
  </form>
</body>

http://www.cssportal.com/blog/style-placeholder-text/

2
  • Mão na roda hein. Muito obrigado @CamiloSantos Commented 10/02/2017 às 17:47
  • Vlw @LucasBarbosaFonseca... não esqueça de sinalizar qual solução foi mais adequada para você :) Commented 10/02/2017 às 18:57
0

Bom para aumentar o tamanho da fonte o pessoal já respondeu.

Então para fazer a palavra ocupar mais espaço você pode usar a propriedade letter-spacing e atribuir a distância entre as letras que desejar.

input:-ms-input-placeholder{letter-spacing:16px;}
input::-webkit-input-placeholder{letter-spacing:16px;}
input:-moz-placeholder{letter-spacing:16px;}	
<input type="text" name="login" placeholder="Login" required id="login"/>

2
  • Muito obrigado @MagicHat entendi perfeitamente Commented 10/02/2017 às 17:45
  • @LucasBarbosaFonseca considere validar uma das respostas clicando abaixo das setas de avaliação no icon verde.
    – MagicHat
    Commented 10/02/2017 às 17:50

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 .