Aligning text in a HTML textbox

There is often a need to align text in a HTML textbox especially when the text to be entered are always numbers. In case of numbers the preferable alignment is ‘right’.

The ‘text-align’ property can be used to align text in a textbox or in fact in any element which supports the ‘style’ property.

An example to right align a text in a HTML textbox is as below:

The 'text-align' property describes how inline content of a block is aligned. Values have the following meanings:


left, right, center, justify, inherit


The 'inherit' value


Each property may also have a specified value of 'inherit', which means that, for a given element, the property takes the same computed value as the property for the element's parent. The 'inherit' value can be used to strengthen inherited values, and it can also be used on properties that are not normally inherited.


If the 'inherit' value is set on the root element, the property is assigned its initial value.


In the example below, the 'color' and 'background' properties are set on the BODY element. On all other elements, the 'color' value will be inherited and the background will be transparent. If these rules are part of the user's style sheet, black text on a white background will be enforced throughout the document.

body {
color: black !important; 
background: white !important;
}

* { 
color: inherit !important; 
background: transparent !important;
}