How to align texts inside input?

Question

For all inputs by default, the input text starts on the left. How do you start on the right side?

Answer 1

Use the text-align property in your CSS:

input { text-align: right; } 

This will apply to all page entrances.
Otherwise, if you want to align the text of just one input, set the inline style:

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

Answer 2

Try this in your CSS:

 input { text-align: right; } 

To center the text:

 input { text-align: center; } 

But it should be left-aligned, as this is the default value - and, apparently, is the most user-friendly.

Answer 3

Here you go :

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

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

Answer 4

The accepted answer here is correct, but I would like to add some information. If you use a library / framework such as bootstrap, classes can be created for this. For example, bootstrap uses the text-right class. Use it like this:

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

As a note, this also works with other types of input, such as numeric, as shown above.

If you are not using a good framework like bootstrap, you can create your own version of this helper class. Like other answers, but we are not going to add it directly to the input class, so it will not apply to all inputs of your site or page, this may be an undesirable behavior. This way, it will create a good css class to align objects without the need for inline styling or impact on every input window.

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

Now you can use this class in the same way as the inputs above with class="text-right" . I know that this does not save a lot of key touches, but it makes your code cleaner.

Answer 5

If you want it to align to the right after the text loses focus, you can try using the direction modifier. This will display the correct part of the text after losing focus. for example, useful if you want to show the file name in a long way.

 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> 

Selector not currently supported: browser support

Answer 6

No CSS: Use the STYLE property of text input

STYLE = "text-align: right;"