How to position the placeholder

Asked

Viewed 3,929 times

0

How can I position the placeholder? I created a input but the digitable field does not follow, as in the example image:

Espaço onde quro remover

.inpt {
    border: none;
    background-color: #EBEBEB;
    padding: 3% 20%;
    margin-top: 4%;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    font-size: 20px;
    text-align: left;
}
<form method="POST">
    <input name="nome" type="text" class="inpt" placeholder="Nome">
</form>

  • do you want to remove that space that you marked in red? I didn’t quite understand your question...

  • Yes I want to remove it

  • 1

    Your input is with 20% padding on the sides. Take it off.

  • @Daviaragao post as response, even solving in the comment is nice to record your response!

  • @hugocsl make yourself at home.

  • @Daviaragao his young merit, Spondei ai, if not the question will be open without answer, Ai is appearing on the list of questions without answer, even if it has already been solved.

Show 1 more comment

2 answers

1

A ìnput text type does not have space on the sides between its contents and the border.

This behavior is the result of padding: 3% 20%, that is "flooding" its element in 3% for top and bottom and 20% for left and right.

Remove the padding or adjust it to another value. The guide lines of design material indicate 12 dps for this spacing.

.inpt {
    border: none;
    background-color: #EBEBEB;
    padding: 12px 16px 14px;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    font-size: 20px;
}
<input name="nome" type="text" class="inpt" placeholder="Nome">

0


If I understand correctly, you want to remove the space, but keep the placeholder in the center, right?! As the staff said, the space is caused by your padding, just take it. But if you want to keep the placeholder in the center, you can use only one text-align: center, thus:

<input type='text' placeholder="Nome" style="text-align: center" />

However, note that even the normal text was aligned to the center. This we can solve with a little Javascript, like this:

// Quando a tela estiver carregada...
window.onload = function() {
  // Reconhece cada input na tela
  var inputs = document.getElementsByTagName('input');
  // Aqui fazemos um loop passando por todos os inputs
  for (var i = 0; i < inputs.length; i++) {
    // Essa linha é pra chamar a função em cada um dos inputs quando a tela for carregada
    mudarPlaceholder(inputs[i]);
    // Aqui falamos que pra cada tecla que o usuário apertar no input
    inputs[i].setAttribute('onkeyup', 'mudarPlaceholder(this)');
  }
};

// Função para mudar a centralização
function mudarPlaceholder(that) {
  // Se o input estiver vazio
  if (that.value === '') {
    // Tira a classe normal
    that.classList.remove('normal');
    // Centraliza o placeholder
    that.classList.add('centralizado');
  } else {
    // Senão, tira o centralizado do input
    that.classList.remove('centralizado');
    that.classList.add('normal');
  }
}
.centralizado {
  text-align: center;
}

.normal {
  text-align: left;
}
<input type="text" placeholder="Nome" />

Browser other questions tagged

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