I styled my buttons on the form but they don't look the same on the web.

  • Profile Image
    Lbmils
    Asked on February 05, 2021 at 12:09 AM

    How can I fix this? I attached the way I want them to look on the web, but they show up differently then what I am seeing on the jotform builder.


    1612501708_601cd2cc02eee_

  • Profile Image
    jherwin
    Answered on February 05, 2021 at 04:47 AM

    To fix that, please try adding "!important" in the button CSS Codes. Please see my screenshot below for reference.
    1612518450_601d14323c733_important.pngOr, you can replace all the CSS code in your form with this: https://pastebin.com/raw/tndLCaFS

    Demo Form: https://form.jotform.com/210352077495961

    Please give it a try and let us know how it goes.

  • Profile Image
    Lbmils
    Answered on February 06, 2021 at 12:33 AM

    Thank you that worked. Now how can I remove this shadow on my form when viewed on my phone. 1612589574_601e2a069066e_IMG_BD01FD9A9AE


  • Profile Image
    Mike_G
    Answered on February 06, 2021 at 03:22 AM

    Please inject the following custom CSS codes in your form to remove the inner shadow on the form fields when your form is viewed on a mobile device.

    .form-textbox {
    -webkit-appearance: none;
    }

    Please give it a try and let us know if you need any further assistance.

  • Profile Image
    Lbmils
    Answered on February 06, 2021 at 06:15 PM

    Thank you it worked

  • Profile Image
    Lbmils
    Answered on February 08, 2021 at 12:38 AM

    I have something else that I do not want. If you look at the screen shot you can see how in changes the shape of my form textbox. Also how can I remove the text box from highlighting in yellow?1612762677_6020ce3523e27_IMG_180F7FE3FE2

  • Profile Image
    jherwin
    Answered on February 08, 2021 at 03:51 AM

    I checked your form and it's okay on a mobile device, are you still experiencing this issue in your form?

    Also, can you please let us know the highlight issue you are referring to as I do not see it in your form?

    Looking forward to your response.

  • Profile Image
    Lbmils
    Answered on February 08, 2021 at 06:27 PM

    I have attached two screen shots. One is for the mobile phone. I highlighted my style in green, and I highlighted what happens to the box when I click on it (in red). It changes the shape and adds a style with shadows.

    For the second screen shot it shows what happens to the text box when I click on it on the desktop. It highlights yellow. I do not want the yellow highlight or drop shadow on the inside.

    1612826669_6021c82db0e20_


    1612826686_6021c83ec6023_

  • Profile Image
    Mike_G
    Answered on February 08, 2021 at 07:56 PM

    Thank you for explaining your concern further. I was able to confirm all the concerns you have described on the form you initially linked on this ticket (https://form.jotform.com/210317672628961). I'll try to work on a solution for your concern and I'll get back to you on this ticket as soon as possible.

  • Profile Image
    Lbmils
    Answered on February 09, 2021 at 04:25 AM

    Just following up.

  • Profile Image
    Mike_G
    Answered on February 09, 2021 at 04:57 AM

    Apologies for any delays. Kindly inject the custom CSS codes to meet your requirements.

    @media screen and (max-width: 480px) {
    .form-textbox:focus {
        border-radius: 25px!important;
    }
    }
    .form-line-active input:focus, .form-line-active textarea:focus {
        -webkit-box-shadow: inset 0px 1px 2px 0px rgb(0 0 0 / 45%), 0px 0px 0px 5px #f2f2f2, 0px 0px 0px 6px #e6e6e6 !important;
        box-shadow: inset 0px 1px 2px 0px rgb(0 0 0 / 45%), 0px 0px 0px 5px #f2f2f2, 0px 0px 0px 6px #e6e6e6 !important;
        -moz-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.45), 0px 0px 0px 5px #f2f2f2, 0px 0px 0px 6px #e6e6e6 !important;
    }

    Test your form after and feel free to let us know if you need any further assistance.