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;
}
سؤال
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;
}
المحلول
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;
}