Come allineare i testi all'interno di un input?

Question

Per tutti gli input predefiniti, il testo che si riempie inizia a sinistra. Come lo fai iniziare a destra?

Answer 1

utilizzare la proprietà text-align nel CSS:

input { 
    text-align: right; 
} 

Questo avrà effetto in tutti gli ingressi della pagina.
In caso contrario, se si vuole allineare il testo di un solo ingresso, impostare la linea stile:

<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

Prova questa nel CSS:

input { 
text-align: right; 
} 

Per allineare il testo al centro:

input { 
text-align: center; 
} 

Ma, dovrebbe essere allineato a sinistra, come quello è il default - e sembra essere il più facile da usare.

Answer 4

Senza CSS: Utilizzare la proprietà di stile di input di testo

style = "text-align: right;"

Answer 5

La risposta accettata qui è corretta ma mi piacerebbe aggiungere un po 'di informazioni. Se stai usando una libreria/framework come bootstrap ci possono essere classi incorporate per questo. Ad esempio, bootstrap utilizza la classe text-right. Usare in questo modo:

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

Come nota questo funziona su altri tipi di ingresso pure, come numerico come mostrato sopra.

Se non si utilizza un framework piacevole come il bootstrap, è possibile creare la propria versione di questa classe di supporto. Simile ad altre risposte, ma non lo aggiungeremo direttamente alla classe di input in modo che non si applichi a ogni singolo input sul tuo sito o pagina, questo potrebbe non essere il comportamento desiderato. Quindi questo creerebbe una classe css semplice e facile da allineare le cose giuste senza bisogno di uno stile in linea o che influenzi ogni singolo riquadro di input.

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

Ora è possibile utilizzare questa classe esattamente come gli ingressi di cui sopra con class="text-right". So che non sta salvando molti tratti chiave, ma rende il tuo codice più pulito.