2016-10-25 4 views
0

Ich verwende den folgenden Stil für den Platzhalter, aber er dreht den Eingabetext (wenn ich mit der Eingabe anfange) von rechts nach links. Jetzt sehe ich diese example, es ist nur Text-Align, aber warum ist meine Formatierung falsch? Hier ist die fiddle für mein BeispielPlatzhalter text-align

input[placeholder="Required"]{ 
    text-align: right; 
} 

Antwort

3

Ihre Wähler input[placeholder="Required"] einen Eingang mit einem Platzhalter-Attribut auswählt, nicht der Platzhalter selbst.

Verwenden Sie die in Ihrem Beispiel gegeben Selektoren:

input::-webkit-input-placeholder { 
 
    text-align: right; 
 
} 
 
input:-moz-placeholder { 
 
    text-align: right; 
 
} 
 
input::-moz-placeholder { 
 
    text-align: right; 
 
} 
 
input:-ms-input-placeholder { 
 
    text-align: right; 
 
}
<form method="post"> 
 
    <div class="blocks"> 
 
    <label for="fullname">Full Name</label> 
 
    <input type="text" id="fullname" name="name" placeholder="Required"> 
 
    </div> 
 
    <div class="blocks"> 
 
    <label for="Email">Email Address</label> 
 
    <input type="Email" id="Email" name="email" placeholder="Required"> 
 
    </div> 
 
</form>

+0

, was den Unterschied zwischen 'Eingang :: - Webkit-input-placeholder' und' Eingang [Platzhalter = "Required"] ' – Nofel

+0

Wie ich in meiner Antwort erklärt: Die die erste wählt den Platzhaltertext und die zweite wählt das Eingabeelement – andreas

+0

also was wird die Syntax, wenn ich es ohne andere Browser-Syntax tun, eine einfache Auswahl für Eingabeelement? – Nofel

1

Da im Beispiel es Arten der Platzhalter und nicht das Eingangselement (wie Sie tun).

input[placeholder="Required"]::-moz-placeholder{ text-align: right; } 
input[placeholder="Required"]::-ms-input-placeholder{ text-align: right; } 
input[placeholder="Required"]::-webkit-input-placeholder{ text-align: right; } 

aktualisiert Demo: https://jsfiddle.net/z1zuo69q/2/