How to Indent an Input & Placeholder

July 19, 2023


Indent the input


This is going to be a short article, but needed. I seem to forget how to do this every time I use an input. I'm just going to make a simple input element in a html document.

A html input element with a placeholder

In the css code change the padding-left to 20px. Whenever you type the cursor should be indented 20px to the left & the placeholder should also be indented.

Css code to indent an input & placeholder

Here is the project.

About the Author

Christopher Howard

Chris is a Javascript developer with a minor in UI design. He values programming in vanilla code. Fill out the form below to contact him.