How to give space between the value and margin of an input field?

Asked

Viewed 1,447 times

1

I own a field input of the kind text, but when typing something in this field, value is leaned against the edge of the input, such as changing the position of the input to get an edge?

html css

2 answers

4


Who defines the visual aspect is the stylesheet (CSS).

The internal margin in a style sheet is defined by the property padding.

Styles can be provided "inline", by external files or within a block <style>

See two inline examples and one using class:

<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 that can help:

What’s the difference between padding and margin in CSS?

More advanced techniques:

How to style a checkbox input?

How to style an input like "file"?

CSS Style input range

How to style the input type search "clean" icon?

Style input type='number' to change arrows

How can I style the <select> arrow in Firefox?

  • Who is alive.... always responds...... :)

  • @Bacco thank you

  • 1

    About links with related things I can’t think much now... unless it’s something related to user-agent maybe, or right/left alignments, input is not going to put a ::after, you should not take out Outline, global input attributes etc... But nothing much related to spacing... I’ll even post a little response, but just for the record...

1

It has some ways to make an edge, without using the original edge of the input, which is placed by the browser’s user-agent.

You can customize a outline to use as edge, so you have the property outline-offset to control the offset of the input "edge". Also you can use the pseudo-class :focus to leave the input even more customized when the user clicks on it...

Here are some examples. The dotted edge is what would be the original border of input. The against of outline is that you can’t control each side as in padding: 5px 10px; from the @Acco response, I believe his response may be more versatile, but I’ll leave this one just for the record.

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

  • very good tip, thanks.

  • @Gabrielferreira without problems ;)

Browser other questions tagged html css

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