Right Align Input

Question

I must be brain dead. I'm having a hell of a time right aligning numbers in a input field.

.number {
     text-align: right;
}

<input name="price" type="text" class="number" />

has no effect.

I need to use an input field since I refer to the value in JavaScript and I'm using it both for input and display.

Thanks

Answer 1

Yeah - text-align: right should work.

Are you sure there isn't another style or something that's overriding it?

(If you don't have it already, I'd recommend the FireBug plugin for Firefox: right-click the element in question and select "Inspect Element" - that'll tell you every style that's actually being applied, and what's overridden what.)

Answer 2

It could be that you have a more specific selector that overrides the text-align property of .number

To make your selector more specific, specify the element type...

input.number {
   text-align: right;
}

You may have to get even more specific than that, such as...

#formId input.number { }

Answer 3

If you still can't get that class to override styles coming in from elsewhere, you may also want to try

text-align: right !important;