CODEWITHSUNDEEP
css
Mawg
Mawg

Reputation: 40185

How can I align numeric input right and text input left with CSS?

If I have two <input type="text" ... and I know that one should accept text and the other a numeric value (and will check that in PHP when validating the form), can I align the contents of the text box left & the contents of the numeric box right using CSS?

Upvotes: 23

Views: 48053

Answers (3)

ihappyk
ihappyk

Reputation: 555

The latest update for this can be done like below

  1. <input type="number" /> for Numbers Type of text fields.
  2. <input type="text"/> for text type of input fields

Then you can make use of CSS.

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


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

This would help you a lot if you add more fields to your webpage.

Upvotes: 22

user3045873
user3045873

Reputation: 21

Just correction regarding CSS external file:

input.right{
    text-align: right;
}

Upvotes: 0

Rob
Rob

Reputation: 648

<style type="text/css">
     .right { text-align: right; } </style>

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

Upvotes: 27

Related Questions