Infinite Options CSS Guide

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 primarily help you target the correct HTML element within each option field.

We can't provide you the code needed since all themes are different. We do offer a service that can help write code as well as make sure everything works properly. All you have to do is request the  Expert Install Service from your Infinite Options dashboard.

Here's an instruction on how to add CSS to your theme.

  • Small Text Field
    /* LABEL */
    #infiniteoptions-container div > label {
      color: black;
    }
    
    /* INPUT FIELD */
    #infiniteoptions-container input[type="text"] {
      border: 1px solid blue;
    }
    
    /* PLACEHOLDER */
    #infiniteoptions-container input[type="text"]::placeholder {
      color: red;
    }
    	
  • Large Text Field
    /* LABEL */
    #infiniteoptions-container div > label {
      color: black;
    }
    
    /* INPUT FIELD */
    #infiniteoptions-container textarea {
      border: 1px solid blue;
    }
    
    /* PLACEHOLDER */
    #infiniteoptions-container textarea::placeholder {
      color: red;
    }
    
    /* CHARACTER LIMIT TEXT */
    #infiniteoptions-container span p {
      color: green;
    }
    	
  • Drop-Down Menu
    /* LABEL */
    #infiniteoptions-container div > label {
      color: black;
    }
    
    /* DROP-DOWN MENU */
    #infiniteoptions-container select {
      border: 1px solid blue;
      color: red;
    }
    	
  • Check-box Options
    /* LABEL */
    #infiniteoptions-container div > label {
      color: black;
    }
    
    /* OPTIONS */
    #infiniteoptions-container span label {
      color: blue;
    }
    
    /* CHECKBOXES */
    #infiniteoptions-container input[type="checkbox"] {
      box-shadow: 1px 1px red;
    }
    	
  • Radio-button Options
    /* LABEL */
    #infiniteoptions-container div > label {
      color: black;
    }
    
    /* OPTIONS */
    #infiniteoptions-container span label {
      color: blue;
    }
    
    /* RADIO BUTTONS */
    #infiniteoptions-container input[type="radio"] {
      box-shadow: 1px 1px red;
    }
    	
  • Number Input Field
    /* LABEL */
    #infiniteoptions-container div > label {
      color: black;
    }
    
    /* INPUT FIELD */
    #infiniteoptions-container input[type="number"] {
      box-shadow: 1px 1px blue;
    }
    
    /* PLACEHOLDER */
    #infiniteoptions-container input[type="number"]::placeholder {
      color: red;
    }
    	

Still need help? Contact Us Contact Us