Wrong initial padding of placeholder text in password field in Chromium

Question

With this code (jsbin here) the initial of placeholder text in the password field is pushed to the right, but once you click inside the input padding vanishes and you get correct alignment. What is causing this, and what needs be reset?

Markup:

<input type="text" placeholder="Email"/>
<input type="password" placeholder="Password"/>

CSS:

input {
  font-family: monospace;
  font-size: 20px;
  width: 250px;
}

Answer 1

You can use text-align: left for placeholder pseudo-class to make sure that it's displayed on the web browser correctly at the left.

For the Webkit web browsers (Chromium in this case):

::-webkit-input-placeholder {
    text-align: left;
}