How to add padding to input field text [CSS]

Question

I have a quick question, I know that I can edit a placeholder text for an input field using CSS. But I was wondering how I can add padding to the actual text (the text that the user types in). I have provided an image below, I have added padding to the placeholder text but am struggling to add padding to the actual text for the input field so that it is aligned with the placeholder text.

Here is what I have tried:

.form TextInput {
  padding-left: 10px;
}

This obviously isn't working and I was just wondering if anyone else has a solution?

Image link

Edit: I am not trying to move the input field itself, just the text inside. Just like I did with the placeholder, but only this time I want to move the text to match the position of the placeholder.

Link 2

Answer 1

Padding on the input; for users typing in the field or a preset value parameter:

.form input[type="text"] {
    box-sizing: border-box;
    padding-left: 10px;
}

Padding on the placeholder:

.form input::placeholder {
    padding: 10px;
}

Answer 2

You have to give css to the input field as follows

.form input[type="text"]{
  padding:10px;
}

Check this fiddle here