ClickDimensions’ surveys give you a variety of ways to collect information from your customers with many different types of questions, including rating bars (stars), checkbox questions and radio questions. What many people don’t know is that even these specialized questions can be customized and styled in creative and engaging ways to match your brand guidelines or to simply engage customers and prospects in an unexpected way. All it takes is some simple CSS. In this post, we will cover how to use CSS to target and style these input fields as well as give some visual examples and recommendations of how you might use these CSS tricks.
Stars are typically a great way to communicate a rating question. Their meaning is clear to anyone who encounters them. However, sometimes, it can be good to shake it up. Maybe you’re running a campaign to solicit new reviews and want to test to see if you get higher or lower ratings with different graphics or maybe your survey is meant to be good fun and you want to incorporate something comical (a few emojis come to mind). Either way, a rebooted rating question is just a few lines of code away.
First, we need to create a new sprite with the graphics we want to use. This should be a transparent GIF or PNG that is 16px X 80px. I’ve included my modified sprite and the default stars sprite in this post. You can download these and use them as jumping off points if you like.
As you can see, there are five icons in these sprites. The bottom three handle unselected, selected and hovered ratings respectively while the top two are for the button that clears a selected rating. Once you’ve created your own sprite, we want to upload it to the image manager in an HTML component on our survey.
From here, we can temporarily embed the image into the HTML component and get the reference URL out of the Source view.
Click OK to embed:
Copy the source attribute out of the IMG tag in the HTML block:
Now that we have that, we just need to add a few lines of CSS to the code editor. There’s a whole block we need to add, but you only need to customize one line of it. So, first paste this CSS in the top of the CSS section of the code editor:
Then, find the block that looks like this:
Then, update this line with your URL:
Simply copy and paste the URL, save in the code editor and refresh, and you should see your sprite in place of the stars.
Checkboxes and Radio Buttons
Most browsers set default styles for checkboxes and don’t let custom CSS override them without special keywords. This is generally done to protect the user experience and keep checkboxes and radio buttons from being hidden. You can overwrite this with just a few lines of CSS, though, by targeting the input type of checkboxes. Back in the survey’s code editor, add:
Then, inside this selector, set the prefixed and unprefixed appearance attribute to “none.” This completely resets this element’s default browser settings. This looks like:
You will notice that the same statement was made three times with different attached prefixes. This is important because appearance still doesn’t have 100% adoption across all browsers, but by including the -webkit- and -moz- versions, you can get up to 94 percent coverage within the US and 91 percent coverage globally (these are rough numbers gleaned from https://caniuse.com/#search=appearance). If a customer isn’t on a browser that supports these statements, there’s no need to worry. Modifying checkboxes and radio buttons this way fails very gracefully. The customer will just see the default radio/checkbox inputs as their browser styles them by default.
Now, you can introduce a few styles, changing the checkbox when it’s checked and active as well as adding your own custom checkmark using an :after statement:
Finally, radio buttons function in much the same way as checkboxes. You just need to target the inputs of the type Radio instead of Checkbox:
Now, you will need to create a new “dot” for the middle of our selected radio button. To do this, use similar code to creating a custom checkmark, but instead of using encoded text as the content, use an empty string. This creates a blank section that can be styled using border-radius and a background to create a perfect circle.
Now, you’ve created a new ratings bar, restyled your checkboxes and created snazzy new radio buttons to spice up your survey. You’re ready to share your creation with the world!