Reputation: 4213

How to align texts inside of an input?

For all default inputs, the text you fill starts on the left. How do you make it start on the right?

Upvotes: 346

Answers (11)

Shafiqul Islam

Reputation: 124

From Bootstrap 5 we can use 2 new classes:

text-start to left align texts and
text-end to right align texts.

Upvotes: -1

Anzi

Reputation: 11

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

Upvotes: 1

pft1

Reputation: 19

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

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<input step="any" id="myInput" type="number" class="text-end">

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

Upvotes: 1

Mohamed Emad

Reputation: 186

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>

Upvotes: 3

Nadeem Taj

Reputation: 1

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

Upvotes: 0

rulonder

Reputation: 171

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;
}

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

The not selector is currently well supported : Browser support

Upvotes: 7

Doug E Fresh

Reputation: 840

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.

Upvotes: 18

elias

Reputation: 15480

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;"/>

Upvotes: 497

Cynthia

Reputation: 5403

Here you go:

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

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

Upvotes: 19

Hardeep Singh

Reputation: 53

Without CSS: Use the STYLE property of text input

STYLE="text-align: right;"

Upvotes: -3

GautamD31

Reputation: 28763

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.

Upvotes: 47

How to align texts inside of an input?

Answers (11)

Related Questions