Domanda

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?

Screenshot

Markup:

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

CSS:

input {
  font-family: monospace;
  font-size: 20px;
  width: 250px;
}
È stato utile?

Soluzione

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;
}
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top