How to align texts inside of an input?

Use the text-align property in your CSS:

input { 
    text-align: right; 
}

This will take effect in all the inputs of the page. Otherwise, if you want to align the text of just one input, set the style inline:

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

---

Try this in your CSS:

input {
text-align: right;
}

To align the text in the center:

input {
text-align: center;
}

But, it should be left-aligned, as that is the default - and appears to be the most user friendly.

---

The accepted answer here is correct but I'd like to add a little info. If you are using a library / framework like bootstrap there may be built in classes 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 works on other input types as well, like numeric as shown above.

If you aren't using a nice framework like bootstrap then you can make your own version of this helper class. Similar to other answers but we are not going to add it directly to the input class so it won't apply to every single input on your site or page, this might not be desired behavior. So this would create a nice easy css class to align things right without needing inline styling or affecting every single input box.

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

Now you can use this class exactly the same as the inputs above with class="text-right". I know it isn't saving that many key strokes but it makes your code cleaner.

---

Here you go:

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

---

If you want to get it aligned to the right after the text looses focus you can try to use the direction modifier. This will show the right part of the text after loosing focus. e.g. useful if you want to show the file name in a large path.

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

The not selector is currently well supported : Browser support

---

The following methods may be of use to you:

<style>
   input {
         text-align: right !important; 
   }
   textarea{
        text-align:right !important;
   }
   label {
       float: right !important;
   }
</style>

---

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

---

With Bootstrap 5 is now class="text-end":

. Refer to: https://getbootstrap.com/docs/5.0/utilities/text/#text-alignment

---

Without CSS: Use the STYLE property of text input

STYLE="text-align: right;"

---