I recently had a client request a red asterisk instead of the default (required) that comes with cformsII the wordpress plugin. As it was actually my first time using cformsII in any fashion I started with a quick search to see if there was a documented work around to make this happen. While I did find a way to change the default text to a * which I could then have applied a colour to I wondered further if I could do it with an image. I realize that an image was not required for my circumstance but since I was digging into the CSS a bit I figured I should find out if this was possible just incase it ever came up in the future.

If you’re going to do this start by copying the CSS from cformsII into the stylesheet for your site. I learned through a few trials that this is way easier especially if you’re using a code editor with a built in FTP client for editing remote files. Once you have picked through the CSS and styled the code how you like it we’re off to the races.

The (required) text is surrounded by a span and class as seen below:

<span class="reqtxt">(required)</span>

In the stock CSS you will find that there are a few lines of CSS to display the look of the required text. I deleted all of them and combined the styles to simply:

span.reqtxt, span.emailreqtxt {text-indent:-5000px; display:

inline-block; background: url(http://filepath/asterisk.gif)
 no-repeat; width:15px; height:15px;}

This is partly things I learned from the CSS Sprites technique (text-indent) and partly trial and error. I had actually tried the same code while I was trying to edit CSS from withing cformsII and it didn’t work inside there. I am not sure why but I assume that I made a typing error the first time. You have to set the display value to inline block or the images will collapse and not be seen. Also don’t forget to define the width and height of the images.

I also tried to set the font-size to 0px but found that in IE it rendered small lines that was the text. After I realized that I tried text-indent again and it worked. I did find that a negative text indent number was required as with a positive one the (valid email required) text did not indent.

This method will allow you to display any image in place of the (required) text on the page. If your client decides to add more (required) fields at a later date it will also continue to work with the new fields. The only thing I was unable to get client proof was the legend. I hand coded the legend at the bottom of the form. This means that if my client adds a new form it will not automatically show the legend at the bottom. I feel this is only a minor draw back as the symbol is widely used for the same meaning and the implementation of a legend at the bottom of the form is marginal in time taken.

You can see the technique in use here.If anyone else has better options for implementing an image replacement for the (required) field I would love to hear about it in the comments.