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

208

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

phz
la source
2
Cela change les champs pour qu'ils soient compatibles avec une langue de droite à gauche?
S. Albano
input {text-align: right; }
Rasika

Réponses:

327

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;"/> 
elias
la source
25

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.

Gautam3164
la source
9

Et voilà :

input[type=text] { text-align:right }
<form>
    <input type="text" name="name" value="">
</form>

Cynthia
la source
9

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.

Doug E Fresh
la source
3

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

rulonder
la source
0

@ 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; "})

Nadeem Taj
la source
-5

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

STYLE = "text-align: right;"

Hardeep Singh
la source
11
C'est toujours du CSS, juste du CSS en ligne.
Martin Hansen
2
L'attribut de style est utilisé pour créer du CSS en ligne. Le code text-align:rightest définitivement CSS.
Ron