padding the text of a HTML input field

Question

I have a HTML input field.

If I do

padding-left: 10px

, it will move the text of the input field to the left BUT, the right side of the input field (or right side of the box) disappears - (please see the attachment).

What CSS setting can I use to fix this?

TIA

Answer 1

You should use box sizing property. Always use this in your reset.css :

* {box-sizing:border-box;}

Answer 2

在您的CSS文件中

input {box-sizing: border-box;}

Answer 3

use below css:

input {box-sizing: border-box;}

Also provide width to your input field