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

    CSS not working when preview form

    Asked by markkeane on February 10, 2017 at 08:10 AM

    Hi there, 

    I have added some custom css to my form, when in design mood it looks perfect and works as it is supposed too but when I preview the form the hover css is not working. Can you please let me know what is the issue here.

     

    Regards

     

    Mark

    Page URL:
    https://form.jotformeu.com/70402754634352

  • Profile Image
    JotForm Support

    Answered by Kiran on February 10, 2017 at 10:14 AM

    Please change the .(dot) to :(colon) in the CSS code before hover which should be working fine. The CSS code can be as below:

    #input_10:hover {

        background : #52247f;

        border : 2px solid;

        border-color : #52247f;

        color : #ffffff;

        font-weight : bold;

        text-shadow : none;

    }

    Hope this information helps! 

  • Profile Image

    Answered by markkeane on February 14, 2017 at 07:12 AM

    Thanks Kiran fix that work fine. I just seem to have white line at the top of the button when i hover over it? What is causing this? I would like this removed.

  • Profile Image
    JotForm Support

    Answered by Kiran on February 14, 2017 at 08:25 AM

    This is being caused by the box border. Please add the following code to the form so that it should be displaying with full background.

    .form-submit-button {

        -webkit-box-shadow: none;

        box-shadow: none;

    }

    Hope this information helps! 

  • Profile Image

    Answered by markkeane on February 16, 2017 at 02:40 PM

    Thanks Kiran that work perfectly.