How to create an offset for the text displayed in an input?

Question

I am creating a basic log in function, really nothing fancy.

this is what I have right now, but this is what I would like to have:

I don't just want to add spaces, since, when the user clicks the input field it clears the input. But I don't just want to clear it to another space as the user would be able to delete that then. I want a premade property to have that little one space-offset on the left, preferably ignored if I evaluate the input later on. Thanks in advance.

Answer 1

Did you try padding :

.username
{
  padding-left : 10px;
}

<input type = 'text' class='username' value='Enter username'>