Hello! I’m wondering if there’s a way to change the color of the hover effect border for the enter fields. I also want to see if there’s an option to change the inside color instead (the white background, example: when I hover instead of the border turning grey the white area changes to a darker white or something instead) - I want to test both options to see which better suits.
shop: artgex.myshopify.com
pass:Superpowers123
Thanks!
Hello @David123123 ,
Glad to support you today.
To can change the background and border on input when hover, you can check out my suggestion below to make it:
.footer .newsletter .newsletter-form-input-wrap input:hover {
background: #ffffff !important;
box-shadow: 0 0 0 calc(.1rem + var(--inputs-border-width)) #ddd
}
.header-search-global-form [type=search]:hover {
background: #ffffff !important;
box-shadow: 0 0 0 calc(.1rem + var(--inputs-border-width)) #ddd
}
*Note: you can replace #ffffff and #ddd with another color you want.
I hope you find the answer helpful. If you need further support, do not hesitate to reach out to us.
Kind & Best regards,
GemPages Support Team.
Thanks for the reply!
Do you happen to know why when i click and then my mouse pointer goes elsewhere, the borders reappear as they had previously? I’m wondering if I can keep that the same as the new hover until i click out of the field.
Hi @David123123 ,
Of course 
, I update my code to change the background and border color when click into the input:
.footer .newsletter .newsletter-form-input-wrap input:hover,
.footer .newsletter .newsletter-form-input-wrap input:focus-visible
{
background: #ffffff !important;
box-shadow: 0 0 0 calc(.1rem + var(--inputs-border-width)) #ddd
}
.header-search-global-form [type=search]:hover,
.header-search-global-form [type=search]:focus-visible {
background: #ffffff !important;
box-shadow: 0 0 0 calc(.1rem + var(--inputs-border-width)) #ddd
}
*You just copy my code above and paste it into the previous code.
Thanks! this worked