Make Gravity Forms $ sign smaller

I seem to be doing alot of work with the Gravity Forms plugin for WordPress at present. I love the flexibility of Gravity Forms and have installed it on several hundred websites for all sorts of uses from basic contact forms to Mailchimp integrated subscribe forms to complex quoting calculators. After my post regarding removing decimal places in the price field, one reader asked how to make the currency symbol smaller than the numbers in the price.

How to style the Gravity Forms currency symbol

jQuery could be used but by far the simplest way of reducing the size of the currency symbol is to use CSS. More specifically the ::first-letter pseudo-element.

If we merely add the necessary CSS declaration to a Gravity Forms ID or class using the pseudo-element then, usually, nothing will happen. Typically the price field will have a display property with the value of inline e.g.

#input_4_4 {
display: inline;
}

Why the ::first-letter pseudo-element won’t work in this instance is that the display value must be one of block, inline-block, table-cell, list-item ortable-caption to work. First-off therefore add the following CSS to ensure that we can use the ::first-letter pseudo-element (replace #input_4_4 with the ID of your field):

#input_4_4 {
display: inline-block;
}

Now we’re ready to style the currency symbol. In the following CSS example replace the ID with that of your field and change the selectors as required. Be sure to place the following CSS in your stylesheet after the CSS provided above:

#input_4_4::first-letter {
font-size: 75%;
font-weight: 200;
}

Your , , or other currency symbol may now be styled using CSS as needed.