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" />
do you want to remove that space that you marked in red? I didn’t quite understand your question...
– RFL
Yes I want to remove it
– João V.
Your input is with 20% padding on the sides. Take it off.
– DaviAragao
@Daviaragao post as response, even solving in the comment is nice to record your response!
– hugocsl
@hugocsl make yourself at home.
– DaviAragao
@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.
– hugocsl