Change Form Field border color and Form Field background when when I click inside the form

Store Design
1

Hi, Here is my website https://hatkebride.com/

  1. I wanted to change the Form field background color to #FFFFFF when I click inside the form
  2. I wanted to change the Form field outline thickness to 2px and the Form field outline color to #FFFFFF when I click inside the form.

Note: I wanted to make above changed for entire site. for example newsletter popup, footer, contact page everywhere.

keyurdodiya_1-1657393096878.png
keyurdodiya_1-1657393096878.png1920×1020 133 KB

2

@keyurdodiya

can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.site-footer .btn:not(.disabled):not([disabled]):hover, .site-footer .btn:not(.disabled):not([disabled]):focus, .site-footer textarea:not(.disabled):not([disabled]):hover, .site-footer textarea:not(.disabled):not([disabled]):focus, .site-footer select:not(.disabled):not([disabled]):hover, .site-footer select:not(.disabled):not([disabled]):focus, .site-footer input:not(.disabled):not([disabled]):hover, .site-footer input:not(.disabled):not([disabled]):focus {
    background: #fff;
    box-shadow: 0 0 0 0.2rem #ffffff;
}