What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Form Collapse Hover Effect

    Asked by cgnz on May 13, 2012 at 04:45 PM

    Hi

     

    I would like to turn off the VOVER effect for FORM Collapse. Or bepointed if there is anything wrong with the CSS code I have cobbled together.

     

    As the screenshot shows, when hovered over the Text disappears.

     

    Screenshot attached.

     

    Thanks!

    Rich

     

    .form-matrix-values .form-textbox {width: 180px;font-size: 9px;background-color:#ffffff;font-family: Verdana;font-weight: normal;font-color: black;border-style: none; padding-left: 1px;padding-right: 1px;}.form-matrix-column-headers {font-size: 10px;background-color:#3b5998;font-family: Verdana;font-weight: bold;font-color: black;border-style: none;}.form-matrix-row-headers {font-size: 10px;background-color:#3b5998;font-family: Verdana;font-weight: bold;font-color: black; border-style: none }.form-header-group{

    background-color:#3b5998;color:white;}.form-matrix-values {background:transparent !important;}.form-matrix-values .form-textbox {width: 100% !important;}

    .form-collapse-table {

    background:none grey;

    }

    .form-collapse-mid {

    text-shadow:none;

    }

    Screenshot
  • Profile Image
    JotForm Support

    Answered by jonathan on May 13, 2012 at 06:15 PM

    Hi,

    Perhaps you can remove the hove effect.
    I change the form-collapse CSS to this one.

    .form-collapse-table {

    background: grey !important; color: #FFFFFF !important; 

    }

    The form become like this http://www.jotform.me/form/21336446432449

    Please inform us if this is not still ok with you. Thanks.

     

     

  • Profile Image

    Answered by jeanettebmz on May 13, 2012 at 06:15 PM

    Hi, you just need to add the following custom CSS code to the existing one:

    .form-collapse-table:hover {

    box-shadow:none;
    text-shadow:none;
    background: grey;

    }

    Here you have my clone

    Hope this helps. Feel free to come for more assistance

     

    Jeanette


  • Profile Image
    JotForm Support

    Answered by jonathan on May 13, 2012 at 06:32 PM

    @cgnz,

    Hi, my colleague Jeanette suggestion also works.

    Take your pick! =)

  • Profile Image
    JotForm Support

    Answered by abajan on May 13, 2012 at 08:28 PM

    @everyone

    The color name gray has wider browser support than grey. A curious thing is that although IE recognizes gray, it will not recognize lightgray. You have to use lightgrey! (At least that's the case with older versions of the browser.) To be on the safe side, use hex codes because they have the widest support across platforms. In this instance, that would be #808080 instead of grey or gray.

    Just thought I should mention that little tidbit I learned a few months ago. :)

    Related links:

    Is "lightgray" a valid named colour?
    Grey vs. Gray
    Cool color picker

  • Profile Image

    Answered by cgnz on May 17, 2012 at 08:32 PM

    Love the serrvice at Jotform!

     

    Just a quickie....if I wanted those collapse forms to be this colour #3b5998 what would the code be.

     

    I want them to be the same colour as the form background. IE Seemless with the background of overall form?

     

    Is this possible?


    Cheers!

     

  • Profile Image

    Answered by jeanettebmz on May 17, 2012 at 08:51 PM

    Try the following code and let us know:

    .form-collapse-table {background:  #3B5998 !important; }

    Best regards!

    Jeanette

    Note: You can check my form to see the change