How to adjust the blinking cursor location in a text input field-CodePudding

I created a form, and I added padding to the placeholder so it wasn't pushed up against the box it sits in. I am trying to do the same for a text input cursor. When the user clicks in the text input, I want the blinking cursor to have padding so it isn't pressed against the input box it sits in. If you see the picture I added, you can see the blinking cursor pressed against the border. see image

CodePudding user response：

Looks like styling issue, could you provide an example of what you coded on codepen or any other playground?

CodePudding user response：

try adding to the class in css

text-indent: 20px;

CodePudding user response：

Applying padding to your textField should solve this problem. Try the code below,

.input-field{
  padding: 5px 10px;
}

<!DOCTYPE html>
<html>
<body>
<input  placeholder="First Name"/>
</body>
</html>