When you have a field that expects a currency value, it's helpful to prefix it with the appropriate currency symbol (such as a dollar sign), as a cue to the user about the kind of data expected. However, this tends to throw off the visual alignment of your forms:
There's a better way. Simply apply the class money to the field,
and define the following properties in your stylesheet:
input.money {
background: url( "/images/icon_dollar.png" ) no-repeat left;
padding-left: 11px;
width: 72px;
text-align: right;
}
Now your buns will look spectacular:
You can download the icon used in this example, or alternate versions for the euro and the Japanese yen.
