Issues with active form border color and submit button.

Hello friends,

I am having two issues with my current form:

1.) I have injected custom css code to change the active field border color, however it is not working.

2.) My submit button is being stretched across the entire form width (as if in Responsive mode) while viewed on my webpage normally. 

Please Help!

Thanks!

1) Please try with the following code: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

.form-line-active input:focus{

border:1px solid blue !important;

}

.form-line-active textarea:focus{

border:1px solid blue !important;

}

Result:

2) Your forms submit button stretched across the entire form width, because of the dimensions of the div where you have embedded it:

So, you may consider increasing the div's width.

Let us know if you need more help.

Thank you for your prompt response! I have added the custom code above, however the blue border still exists. There is a very thin purple border (the color I would like alone), but also the blue border. What am I missing?

http://www.sistermoonjewelry.com/index.php/shop

Also, in regards to my second issue with the Submit button, is there css I can manipulate to prevent this mobile responsive behavior of the button? Can I simply have the Submit button not resize on small screens (or narrow divs)?

Thanks in advance!!

 There is a very thin purple border (the color I would like alone), but also the blue border. What am I missing?

Please do note that depending on the browser where the form is viewed, there is an outline color applied to the fields, so you will need to remove it and show only the border color. 

Base on that you've mentioned, this should be the correct code you need to embed: 

.form-line-active input:focus, .form-line-active textarea:focus {

    border : 1px solid purple !important;

    outline: none;

}

Also, in regards to my second issue with the Submit button, is there css I can manipulate to prevent this mobile responsive behavior of the button? Can I simply have the Submit button not resize on small screens (or narrow divs)?

Please inject this code to set the same with no matter the screen size: 

   .form-submit-button {

        width: auto !important;

    }

Here is my sample form: https://form.jotform.com/62097270607962 

Hope this helps. 

Thank so much! JotForm's support is truly superb!

Just one last detail....Do the active form fields (of my contact form) in your browser show a slight yellow shadow/highlight around the purple?

I am using Safari and Firefox and I see a yellow border. Faint...but there. Is there css to remove it?

Continued thanks!

I checked your form on Firefox but I don't see any yellow highlight around the purple.

I also checked on Safari but I didn't notice any highlight. Please note that browsers apply their own outline on active fields, however, the previous CSS that my colleague Kevin provided has removed this outline from being shown on your form. So your active fields should only show the purple border that you added. Please try refreshyourcache.com/en/home/ to see if the outline is now gone.

If you need further assistance, please let us know.
Regards.

Ok, well thanks again for all your wonderful help! :)