How to Make the Content of Input Start from the Right

Sometimes, you may need to make the content (such as a text or number) of <input> start from the right. This is quite easy to do. Just read our snippet to find the solution!

You can make the content of input start from the right just in two steps.

We’ll start from an example where we use "text" as an input type.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Create HTML

  • Use "text" as an <input> type.
<input type="text"/>

Add CSS

  • Add the text-align property set to “right” for the input.
input {
  text-align: right;
}

The final code looks like the following.

Example of making the text start from the right:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input {
        text-align: right;
      }
    </style>
  </head>
  <body>
    <input type="text" />
  </body>
</html>

Result

You can also need to make numbers start from the right. This is especially useful when there is a need to compare the right-aligned numbers to other number fields.

Example of making the number start from the right:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input {
        direction: rtl;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <form>
      <input type="number" value="5">
    </form>
  </body>
</html>

In the example above, instead of the text-align, we used the direction property set to “rtl”, which means that the direction will be from right to left. Also, we added padding, as well as used a value attribute for the <input>.

Example of making the text start from the right using the value attribute:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input {
        text-align: right;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <form>
      <input type="text" value="name">
    </form>
  </body>
</html>

However, if both number fields and text fields are used, it’s better to use left-alignment to provide better visual flow.