1

Possuo um campo input do tipo text, porém ao digitar algo nesse campo, o value fica encostado na borda do input, como alterar a posição do que foi digitado para ficar com uma margem da borda?

1
  • Utilize o a propriedade CSS padding no input. 1/08/2019 às 23:20

2 Respostas 2

4

Quem define o aspecto visual é a folha de estilos (CSS).

A margem interna numa folha de estilos é definda pela propriedade padding.

Estilos podem ser fornecidos "inline", por arquivos externos ou dentro de um bloco <style>

Veja dois exemplos inline e um usando classe:

<style>
   .superborda {padding:50px}
</style>

<input type="text" style="padding:4px" value="um">
<input type="text" style="padding:5px 20px" value="dois">
<input type="text" class="superborda" value="três">

Links que podem ajudar:

Qual a diferença entre padding e margin no CSS?

Técnicas mais avançadas:

Como estilizar um input do tipo checkbox?

Como estilizar um input do tipo "file"?

CSS Estilizar input range

Como estilizar o ícone "limpar" do input type search?

Estilizar um input type='number' para trocar as setas

Como posso estilizar a seta da tag <select> no Firefox?

3
  • Quem é vivo....... sempre responde... :)
    – hugocsl
    1/08/2019 às 23:24
  • @Bacco obrigado 1/08/2019 às 23:27
  • 1
    Sobre links com coisas relacionados não consigo pensar muito agora... a não ser que seja algo relacionado a user-agent talvez, ou alinhamentos direita/esquerda, input é vou não da para colocar um ::after, não se deve tirar o outline, atributos globais do input etc...Mas nada muito relacionado a espaçamento... Vou até postar uma respostinha, mas só pra constar como opção...
    – hugocsl
    1/08/2019 às 23:30
1

Tem algumas formas de fazer uma borda, sem precisar usar a borda original do input, que é colocada pelo user-agent do browser.

Vc pode customizar um outline para usar como borda, pois assim vc tem a propriedade outline-offset para controlar o afastamento da "borda" do input. Além disso vc pode usar a pseudo-classe :focus para deixar o input ainda mais customizado quando o usuário clicar nele...

Veja uns exemplos. A borda pontilhada é o que seria a borda original do input. O contra do outline é que vc não consegue controlar cada um dos lados como no padding: 5px 10px; da resposta do @bacco, acredito que a resposta dele pode ser mais versátil, mas vou deixar essa aqui só pra constar.

inserir a descrição da imagem aqui

input {
    border: 1px dashed #ddd;
    outline: 1px solid blue;
    outline-offset: 10px;
    margin: 10px;
}
input:focus {
    outline: 1px solid blue;
}
input:nth-child(2) {
    outline-offset: 0px;
}
input:nth-child(2):focus {
    outline-offset: 10px;
    outline: 1px solid rgb(0, 255, 255);
    border:none;
}
<input type="text" value="123">
<input type="text" value="clica aqui">

2
  • muito boa a dica, valeu. 1/08/2019 às 23:49
  • @GabrielFerreira sem problemas ;)
    – hugocsl
    1/08/2019 às 23:51

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 .