Customize Options using CSS

By default, Infinite Options inherits styles from your theme. Depending on how your theme is set up, these styles may not carry over in the best way possible.

However, Infinite Options fields can be styled with CSS code. This document will provide an introduction on how to target the correct HTML element within each option field.

A basic understanding of HTML and CSS code may be required to customize the options to your liking. If you can't seem to figure it out, we offer an Expert Install Service where we take care of the installation for you. Check out this article for more information.

Getting Started...

1. Starting with the Infinite Options app open, navigate to the Settings section in the left sidebar.

2. Locate the Custom CSS field.

3. Start off by selecting the element and copying the CSS snippet or view the full list below.

Label

#infiniteoptions-container div > label {

}

Text

#infiniteoptions-container input[type="text"] {

}

Large Text

#infiniteoptions-container textarea {

}

Number

#infiniteoptions-container input[type="number"] {

}

Radio Buttons

#infiniteoptions-container input[type="radio"] {

}

Checkboxes

#infiniteoptions-container input[type="checkbox"] {

}

Radio Buttons & Checkboxes Values

#infiniteoptions-container span label {

}

#infiniteoptions-container select {

}

Spacing between Options

#infiniteoptions-container > div {

}

Placeholder Text (Text, Large Text, Number)

#infiniteoptions-container input[type="text"]::placeholder {

}

#infiniteoptions-container textarea::placeholder {

}

#infiniteoptions-container input[type="number"]::placeholder {

}

Tooltip

#infiniteoptions-container .spb-tooltiptext {

}

Tooltip (below field)

#infiniteoptions-container .spb-helptext {

}

4. Insert the CSS snippet into the Custom CSS field.

5. Within the curly brackets, you will need to apply CSS properties (each on a new line) that will style your elements.

Not familiar with CSS properties? Here are some common examples.

  • Set text font to Helvetica,"Helvetica Neue",Arial,"Lucida Grande",sans-serif.
font-family: Helvetica,"Helvetica Neue",Arial,"Lucida Grande",sans-serif;
  • Set font size to 12px. (smaller font)
font-size: 12px;
  • Set font size to 24px. (larger font)
font-size: 24px;
  • Set text color to black. (color hex value: #000)
color: #000;
  • Set text to bold style.
font-weight: bold;
  • Set width to 100% within its container.
width: 100%;
  • Set height to 200px.
height: 200px;
  • Add 10px of spacing below an element.
padding-bottom: 10px;
  • Decrease 10px of spacing above an element.
margin-top: -10px;
  • Apply gray border with a 1px thick solid line. (color hex value: #808080)
border: 1px solid #808080;

For a full list of popular CSS properties, click here: https://cssreference.io/.

As an example, if you wanted to apply some of these CSS properties to the text field and tooltip (below field), here is how it would look.

#infiniteoptions-container input[type="text"] {
  font-family: Helvetica,"Helvetica Neue",Arial,"Lucida Grande",sans-serif;
  font-size: 12px;
  color: #000;
  width: 100%;
  padding-bottom: 10px;
}

#infiniteoptions-container .spb-helptext {
  margin-top: -10px;
}

6. Save your changes.

You can view your product pages to check out the styles you have applied. Good work! 🎊🚀

Related Articles