How to apply custom CSS to the Product Field

  • Profile Image
    audiopod
    Asked on August 22, 2017 at 08:21 PM

    Please Help.

    I have followed the instructions on the Jotform Help blog (https://www.jotform.com/help/176-How-to-Apply-Custom-CSS-to-the-Product-Field).

    The result was that the checkbox has been removed from the Product titles, BUT the "Free" text is still there.

    I am also wanting the Title text to be BOLD. 

    My form is here https://form.jotform.co/40301576947861

    The CSS I injected was 

     

    input[id*="1019"], input[id*="1031"], input[id*="1029"], input[id*="1033"], input[id*="1030"], input[id*="1032"]

    {

    display:none;

    }

    input[id*="1019"] + label > .form-product-details, input[id*="1031”] + label > .form-product-details, input[id*="1029”] + label > .form-product-details, input[id*="1033”] + label > .form-product-details, input[id*="1030”] + label > .form-product-details, input[id*="1032”] + label > .form-product-details

    {

    display:none;

    }

    label[for*="1019”],label[for*="1031”],label[for*="1029”],label[for*="1033”],label[for*="1030”],label[for*="1032”]

    {

    font-weight: bold;

    text-decoration: underline;

    }

     

  • Profile Image
    John_Benson
    Answered on August 22, 2017 at 09:42 PM

    I checked the form you have provided and I can see that the "Free" text has been removed. Except one beside the Audio Hire. 

    I also noticed that the Product Name and Title are not yet in Bold text. To do that, please add this custom CSS code to your form:

    span#input_86_1019_price {

        display: none !important;

    }

    .form-product-name {

        font-weight: bold !important;

    }

    div#subHeader_43 {

        font-weight: bold !important;

    }

    Here's a guide on how to add custom CSS code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Result: