Comment aligner des textes à l'intérieur d'une entrée?

Pour toutes les entrées par défaut, le texte que vous remplissez commence à gauche. Comment faites-vous pour commencer à droite?

Utilisez la propriété text-align dans votre CSS:

input { 
    text-align: right; 
}

Cela prendra effet dans toutes les entrées de la page.
Sinon, si vous souhaitez aligner le texte d'une seule entrée, définissez le style en ligne:

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

Essayez ceci dans votre CSS:

input {
text-align: right;
}

Pour aligner le texte au centre:

input {
text-align: center;
}

Mais, il devrait être aligné à gauche, car c'est la valeur par défaut - et semble être le plus convivial.

Et voilà :

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

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

La réponse acceptée ici est correcte mais j'aimerais ajouter quelques informations. Si vous utilisez une bibliothèque / un framework comme bootstrap, il peut y avoir des classes intégrées pour cela. Par exemple, bootstrap utilise la text-rightclasse. Utilisez-le comme ceci:

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

Notez que cela fonctionne également sur d'autres types d'entrée, comme le numérique comme indiqué ci-dessus.

Si vous n'utilisez pas un cadre sympa comme bootstrap, vous pouvez créer votre propre version de cette classe d'assistance. Semblable à d'autres réponses, mais nous n'allons pas l'ajouter directement à la classe d'entrée, il ne s'appliquera donc pas à chaque entrée de votre site ou de votre page.Ce n'est peut-être pas le comportement souhaité. Ainsi, cela créerait une belle classe CSS facile pour aligner les choses sans avoir besoin d'un style en ligne ou sans affecter chaque zone de saisie.

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

Vous pouvez maintenant utiliser cette classe exactement comme les entrées ci-dessus avec class="text-right". Je sais que cela ne sauve pas autant de frappes mais cela rend votre code plus propre.

Si vous souhaitez l'aligner à droite après que le texte ait perdu le focus, vous pouvez essayer d'utiliser le modificateur de direction. Cela montrera la partie droite du texte après avoir perdu le focus. par exemple utile si vous souhaitez afficher le nom du fichier dans un grand chemin.

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>

Le sélecteur not est actuellement bien pris en charge: prise en charge du navigateur

@ Html.TextBoxFor (model => model.IssueDate, new {@class = "form-control", name = "inv_issue_date", id = "inv_issue_date", title = "Select Invoice Issue Date", placeholder = "dd / mm / yyyy ", style =" text-align: center; "})

Sans CSS: utilisez la propriété STYLE de la saisie de texte

STYLE = "text-align: right;"