How do I remove this blue circle around the button?

  • Profile Image
    Mimich
    Asked on July 31, 2016 at 11:03 AM
    How do I remove this blue circle around the button and increase the top margin of it?
  • Profile Image
    Welvin
    Answered on July 31, 2016 at 11:23 AM

    You have to inject the following custom CSS codes to remove the border in the submit button image:

    .form-submit-button.form-submit-button-img {

        border: none !important;

        outline: none !important;

    }

    Please follow the steps from this guide to inject the codes: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes.

    For the top margin, you can add the following custom CSS codes:

    .form-submit-button.form-submit-button-img {

    margin-top: 15px !important;

    }

    Change the value to your desired spacing.

  • Profile Image
    Mimich
    Answered on August 05, 2016 at 04:27 AM

    Hi, I have included the css code to remove the circle around the button, but that didn't work. Thank you

  • Profile Image
    ashwin_d
    Answered on August 05, 2016 at 05:53 AM

    Hello Mimich,

    Do you want to remove the border from your form #62072418341348

    Please inject the following custom css code in form and that should solve your problem:

    button#input_24 {

        border: none !important;

        margin-top: 15px !important;

    }

    The following guide should help you how to inject custom css code in form:  https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!

  • Profile Image
    Mimich
    Answered on August 05, 2016 at 06:03 AM

    Hi, it didint work, when I refresh the page the border stays the same/ Thank you

  • Profile Image
    ashwin_d
    Answered on August 05, 2016 at 08:10 AM

    Hello Mimich,

    I'm sorry for the trouble caused to you.

    Let me test and get back to you.

    Thank you!

  • Profile Image
    ashwin_d
    Answered on August 05, 2016 at 08:20 AM

    Hello Mimich,

    It seems to be causing because of the blue button style you have added. Can you please check your form and see if it now displays the button correctly without blue border:  http://www.jotformeu.com/form/62072418341348 

    Thank you!

  • Profile Image
    Mimich
    Answered on August 06, 2016 at 05:34 AM

    Hi, I have embedded the form as iframe as suggested in this thread 

    The code

    button#input_24 {

        border: none !important;

        margin-top: 15px !important;

    }

    is included but the button border still remains. Here is the file where the form is included

    Can you please take a look? Thank you

  • Profile Image
    Jan
    Answered on August 06, 2016 at 06:35 AM

    I'm still working for a work around regarding this issue. I will contact you as soon as I have the custom CSS. Thank you.

  • Profile Image
    Jan
    Answered on August 06, 2016 at 08:33 AM

    Thank you for patiently waiting. Please try the following steps:

    1. First of all, you need to fix your custom CSS in the Form Designer. There are red x icons in the CSS. This means that there is an error in the styling. There should be a "}" in line 14 and line 17. Here's a screenshot:

    2. After that, you need to inject this custom CSS:

    .form-submit-button, .form-submit-reset, .form-submit-print {
    border : 0 !important;
    background : transparent !important;
    box-shadow: inset 0px 0px 0px 0px #ffffff !important;
    -moz-box-shadow: inset 0px 0px 0px 0px #ffffff !important;
    -webkit-box-shadow: inset 0px 0px 0px 0px #ffffff !important;
    }

    3. Save the changes and then preview the form. Here's a screenshot:

    If you have any questions, let us know. Thank you.