Sharing: how to individually color portions of questions using CSS injection

  • Profile Image
    csanders_watpac
    Asked on October 23, 2014 at 12:10 AM

    I had a requirement to display certain questions on my forms in a different color to all other questions on the form and additionally I wanted to color the checkbox and radio options text yet another color again.

    i.e. Most client questions on my form are RoyalBlue but with some guidance from the Jotform team I was able to figure out how to make the Title text of specific questions LightSteelBlue and the text of the Radio buttons and Checkboxes gainsboro. I was also able to change the the entire Navigation (skip-to) selection on each page to CadetBlue

    The steps to achieving this were as follow:

    First I had to figure out what color I wanted the various text portions and what colors codes I could use with the CSS injection. For this I referenced the site CSS Color Names at http://www.w3schools.com/cssref/css_colornames.asp

    Having chosen my colors I then had to identify each of the controls I wanted to apply colors to on my form. All I did was load the form in my browser [FireFox] and right-click each of the controls and choose Inspect Element 

    to reveal the control (and in particular Label) ID

    You can do the same for the radio-button and check-box text which are all made up of the base controlID but use input_{controlID}_0~thru~however-many options, instead of label_{controlID}

    To address the control Title label you use the CSS format label#label_{controlID}
    To address the control Option labels you use the CSS format label[for*="input_{controlID}_0]~thru~however-many options

    Follow this by whatever you want to do to those entities ... in my case it was to change the color so I used color: {CSS_color_name}

    If you are using the same action for a whole bunch of controls, you can comma-delimit a list of the controls and follow them all by the action to be performed.
    e.g.

    My completed code looked like this:

     

  • Profile Image
    csanders_watpac
    Answered on October 23, 2014 at 12:14 AM

    ummmm .... What happened to all the screen images I had in this instruction?

    Ahhh .. worked the second time!

  • Profile Image
    jonathan
    Answered on October 23, 2014 at 07:42 AM

    Thank you for sharing this helpful information.

    This will be a great source among the form users.

     

    Cheers!