How to make the text cursor in a text field start a few px in?

Question

I am wanting a text field that has a cursor that starts a few px (say maybe 4) in from the left-hand side. I know it can be done if you make the text field to size using padding, but I wanted to know if there is any way possible without using padding to resize the text box, but using the height and width CSS.

An ideas or input would be greatly appreciated.

Answer 1

Use the text-indent property:

input {
  text-indent:20px;
}

You can also use padding with a fixed width. This will keep the width fixed at 100px but still do your padding.

input {
  padding-left: 10px;
  width: 100px;
}