web-dev-qa-db-fra.com

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 le démarrez-vous à droite?

htmlcssformshtml-input
169
phz

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;"/>
272
elias

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.

23
Gautam3164

Ici vous allez :

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

La réponse acceptée ici est correcte mais je voudrais ajouter une petite information. Si vous utilisez une bibliothèque/structure telle que bootstrap, il peut y avoir des classes intégrées pour cela. Par exemple, bootstrap utilise la classe text-right. Utilisez-le comme ceci:

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

Comme note, cela fonctionne aussi sur d'autres types d'entrée, comme numérique, comme indiqué ci-dessus.

Si vous n'utilisez pas de framework Nice 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. Cela ne s'appliquera donc pas à toutes les entrées de votre site ou de votre page. Ce comportement pourrait ne pas être souhaité. Cela créerait donc une classe css facile et agréable pour aligner les choses correctement sans avoir besoin de style inline ni d’affecter chaque zone de saisie.

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

Maintenant, vous pouvez utiliser cette classe exactement de la même manière que les entrées ci-dessus avec class="text-right". Je sais que cela ne sauve pas beaucoup de frappes mais cela rend votre code plus propre.

6
Doug E Fresh

Si vous souhaitez l'aligner à droite après que le texte ait perdu le focus, vous pouvez utiliser le modificateur de direction. Cela montrera la partie droite du texte après avoir perdu le focus. par exemple. utile si vous voulez 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 non est actuellement bien supporté: support du navigateur

2
rulonder