In case the title of this article is confusing, what I’m trying to show is how to use CSS to change only the style of a particular column of an HTML table… so, for example, how to center-align the contents of the second table column.
The requirements I will describe in this article are to have JavaScript format user-input numbers as traditional currency. This means to show two decimal places (with or without automatic rounding), commas as thousands separators, and with or without a preceding currency symbol like:
Here is a quick overview of how to make number fields in your HTML form look more fancy using Bootstrap3 and jQuery. In particular I will show how to use Bootstrap markup to prepend a Bootstrap icon to one of the text input field on your form. Also I’ll show how to add a jQuery/JavaScript function to nicely format the numbers entered by your users.
In the end the example number fields will look a little something like the image shown here. If you want to try this for yourself, just browse a little further down in this article for a full working HTML example page.
Having nicely formatted number fields in your Web form is an example of how making things look much friendlier and professional, which is definitely a good thing!