How to remove the red border in Submit button hover animation

  • Profile Image
    AltamiraTranslations
    Asked on June 10, 2017 at 08:07 PM

    2) https://www.jotform.com/build/71576175559873/

    Same form, in another language. Same problem as above + a) the submit and reset buttoms have a red frame when you rollover them -how to take that off-; b) the upload button when the page is downloaded shows a redish background, how to take that off?

  • Profile Image
    Kiran
    Answered on June 10, 2017 at 11:32 PM

    a) the submit and reset buttoms have a red frame when you rollover them -how to take that off-;

    Please inject the following CSS code to the form to remove the red border for the Submit and Reset buton.

    .form-submit-button.form-submit-button-simple_rose:active, .form-submit-button.form-submit-button-simple_rose:hover, .form-submit-reset.form-submit-button-simple_rose:active, .form-submit-reset.form-submit-button-simple_rose:hover {

        border: none !important;

    }

    b) the upload button when the page is downloaded shows a redish background, how to take that off?

    I am not sure if I understand this query correctly. Do you mean to say that you download the form as a PDF form and see that the background? Could you provide us with more information on the issue along with a screenshot so that we can assist you further?

    Thanks!

     

     

  • Profile Image
    AltamiraTranslations
    Answered on June 13, 2017 at 01:33 PM

    Thanks Kiran, the red frame is gone, the redish background still shows up for a tiny moment when I download the page... I don´t have time to take a screen shot, but it appears if you move the cursor diagonal from the captcha toward the upload button....  

    Can you advise as well which CSS I have to inject to

    - highlight in red only the boxes where information is missing (I have attached a screen shot)

    - how to replace the purple border around the date button when I click it

    - to highlight the hole box section when information is missing in one of the fields 

     

    I am learning along the way will all the suggestions your team is helping me with. Many thanks for that. 

     

  • Profile Image
    david
    Answered on June 13, 2017 at 03:07 PM

    I checked your form and I do not see the highlight affect you are referring to.  For highlighting of only fields missing information, for groups fields like full name and address, it highlights the group.  If you want to only highlight single elements, you would need to use a single field for each part (one for surname, one for first name, one for last name).

    For the calendar highlight, add the following to remove it:

    div.calendar {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    }

     

  • Profile Image
    AltamiraTranslations
    Answered on June 14, 2017 at 12:19 PM

    Thank you David. Have a nice day.

    Aline