Jak wyrównać tekst wewnątrz wejścia?

Question

Dla wszystkich domyślnych wejść, wypełniany tekst zaczyna się po lewej stronie. Jak sprawić, by zaczynał się na prawo?

Answer 1

Użyj właściwości text-align w CSS:

input { 
    text-align: right; 
} 

ta będzie obowiązywać we wszystkich wejściach strony.
W przeciwnym razie, jeśli chcesz, aby wyrównać tekst tylko jednego wejścia, ustawić inline style:

<input type="text" style="text-align:right;"/> 

Answer 2

Here you go:

input[type=text] { text-align:right }

<form> 
 
    <input type="text" name="name" value=""> 
 
</form>

Answer 3

spróbować tego w CSS:

input { 
text-align: right; 
} 

Aby wyrównać tekst w centrum:

input { 
text-align: center; 
} 

Ale to powinien być wyrównany do lewej, jak to jest domyślne - i wydaje się być najbardziej przyjazny dla użytkownika.

Answer 4

Bez CSS: użyć właściwości stylu wpisywania tekstu

style = "text-align: right;"

Answer 5

Przyjęta tutaj odpowiedź jest poprawna, ale chciałbym dodać trochę informacji. Jeśli korzystasz z biblioteki/frameworka, takiego jak bootstrap, może być wbudowany w to klasy. Na przykład bootstrap używa klasy text-right. Używaj go tak:

<input type="text" class="text-right"/> 
<input type="number" class="text-right"/> 

Jako notatkę to działa na innych rodzajach wejściowych, jak również, jak numeryczna jak pokazano powyżej.

Jeśli nie używasz ładnego framewru takiego jak bootstrap, możesz stworzyć własną wersję tej klasy pomocnika. Podobnie jak w przypadku innych odpowiedzi, ale nie będziemy dodawać go bezpośrednio do klasy wejściowej, więc nie będzie ona stosowana do każdego wejścia w witrynie lub stronie, może to nie być pożądane zachowanie. W ten sposób stworzysz ładną łatwą klasę css, aby dopasować elementy bez potrzeby wstawiania stylów lub wpływania na każde pole wejściowe.

.text-right{ 
    text-align: right; 
} 

Teraz można użyć tej klasy dokładnie taka sama jak wejść powyżej class="text-right". Wiem, że to nie jest zapisywanie wielu kluczowych kresek, ale czyni twój kod czystszym.