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.
Leave a ReplyCancel reply