Comment aligner les textes à l'intérieur de l'entrée?

Pour tous les paramètres par défaut, le texte que vous remplissez commence sur la gauche. Comment voulez-vous faire démarrer sur la droite?

  • C'est en train de changer les champs pour être compatible avec un droit-à-gauche de la langue?
InformationsquelleAutor phz | 2012-08-24
  1. 290

    Utiliser le text-align propriété dans votre CSS:

    input { 
    text-align: right; 
}

    Cela prendra effet à toutes les entrées de la page.

    Sinon, si vous souhaitez aligner le texte d'une seule entrée, définissez le style inline:

    <input type="text" style="text-align:right;"/>
    InformationsquelleAutor elias
  2. 24

    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, qui est la valeur par défaut - et semble être le plus convivial.

    InformationsquelleAutor Gautam3164
  3. 9

    Ici, vous allez:

    CSS:

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

    HTML:

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

    InformationsquelleAutor Cynthia
  4. 7

    La accepté de répondre ici est correct, mais je voudrais ajouter un peu d'info. Si vous utilisez une bibliothèque /framework comme bootstrap, il peut être construit dans les classes pour cette. Par exemple bootstrap utilise le text-right classe. L'utiliser comme ceci:

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

    Comme une note cela fonctionne sur d'autres types d'entrée en tant que bien, comme le numérique, comme indiqué ci-dessus.

    Si vous n'utilisez pas une belle framework comme bootstrap, alors vous pouvez faire votre propre version de cette classe d'assistance. Semblable à d'autres réponses, mais nous n'allons pas à l'ajouter directement à l'entrée de la classe afin de ne pas s'appliquer à chaque entrée unique sur votre site ou votre page, cela pourrait ne pas être le comportement désiré. Donc, ce serait de créer une bonne classe css pour aligner les choses sans avoir besoin inline style ou d'affecter à chaque zone de saisie.

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

    Maintenant, vous pouvez utiliser cette classe exactement le même que les entrées ci-dessus avec class="text-right". Je sais que ce n'est pas l'enregistrement que de nombreux coups de clés, mais il rend votre code plus propre.

    InformationsquelleAutor Doug E Fresh
  5. 2

    Si vous souhaitez obtenir aligné à droite après le texte perd le focus, vous pouvez essayer d'utiliser le modificateur de direction. Cela permettra de montrer la partie droite du texte après avoir perdu le focus. utile par exemple si vous souhaitez afficher le nom de fichier dans un grand chemin.

    CSS:

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

    HTML:

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

    Pas le sélecteur est actuellement bien pris en charge : Prise en charge du navigateur

    InformationsquelleAutor rulonder
  6. -4

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

    STYLE="text-align: right;"

    • C'est encore le css, juste du css.
    • L'attribut Style est utilisé pour la création de CSS. Le code text-align:right est certainement CSS.
    InformationsquelleAutor Hardeep Singh