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

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.

To fix that, please try adding "!important" in the button CSS Codes. Please see my screenshot below for reference.
Or, 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.

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

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.

Thank you it worked

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?

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.

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.

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.

Just following up.

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.