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. Read and find out what properties to use for that.

Tags

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 <span class="attribute">type</span>.

Create HTML

Use "text" as an <input> <span class="attribute">type</span>.

How to Make the Content of Input Start from the Right

<input type="text"/>

Add CSS

Add the text-align property set to “right” for the input. This works reliably for both text and number inputs.

How to Make the Content of Input Start from the Right

input {
  text-align: right;
}

The final code looks like the following.

Example of making the text start from the right:

How to Make the Content of Input 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>

Try it Yourself »

Result

<div class="demo px-2.5 mt-1 mb-5 not-prose"> <input type="text" value="Name">``</input> </div>You may 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:

How to Make the Content of Input Start from the Right

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

Try it Yourself »

In the example above, we use the text-align property set to “right”, which works reliably for number inputs in modern browsers. We also added padding and used a <span class="attribute">value</span> attribute for the <input>.

Example of making the text start from the right using the `<span class="attribute">`value`</span>` attribute:

How to Make the Content of Input Start from the Right

<!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>

Try it Yourself »

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