Come allineare i testi all'interno di un input?

Per tutti gli input predefiniti, il testo che riempi inizia a sinistra. Come si fa a iniziare a destra?

Usa la proprietà text-align nel tuo CSS:

input { 
    text-align: right; 
}

Ciò avrà effetto in tutti gli input della pagina.
Altrimenti, se si desidera allineare il testo di un solo input, impostare lo stile in linea:

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

Prova questo nel tuo CSS:

input {
text-align: right;
}

Per allineare il testo al centro:

input {
text-align: center;
}

Tuttavia, dovrebbe essere allineato a sinistra, poiché è l'impostazione predefinita e sembra essere la più intuitiva.

Ecco qua :

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

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

La risposta accettata qui è corretta ma vorrei aggiungere alcune informazioni. Se stai usando una libreria / framework come bootstrap, potrebbero esserci classi integrate per questo. Ad esempio bootstrap utilizza la text-rightclasse. Usalo in questo modo:

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

Come nota, funziona anche su altri tipi di input, come i numeri come mostrato sopra.

Se non si utilizza un framework piacevole come bootstrap, è possibile creare la propria versione di questa classe di supporto. Simile ad altre risposte, ma non lo aggiungeremo direttamente alla classe di input, quindi non si applicherà a ogni singolo input sul tuo sito o pagina, questo potrebbe non essere il comportamento desiderato. Quindi questo creerebbe una bella classe css facile per allineare le cose senza bisogno di uno stile in linea o influenzando ogni singola casella di input.

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

Ora puoi usare questa classe esattamente come gli input sopra con class="text-right". So che non sta salvando tanti tasti ma rende il tuo codice più pulito.

Se vuoi allinearlo a destra dopo che il testo ha perso la messa a fuoco, puoi provare a usare il modificatore di direzione. Questo mostrerà la parte giusta del testo dopo aver perso la messa a fuoco. ad esempio utile se si desidera mostrare il nome del file in un percorso di grandi dimensioni.

input.rightAligned {
  direction:ltr;
  overflow:hidden;
}
input.rightAligned:not(:focus) {
  direction:rtl;
  text-align: left;
  unicode-bidi: plaintext;
  text-overflow: ellipsis;
}

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

Il non-selettore è attualmente ben supportato: supporto browser

@ Html.TextBoxFor (model => model.IssueDate, new {@class = "form-control", name = "inv_issue_date", id = "inv_issue_date", title = "Seleziona data di emissione fattura", segnaposto = "dd / mm / yyyy ", style =" text-align: center; "})

Senza CSS: utilizzare la proprietà STYLE dell'input di testo

STYLE = "text-align: right;"