How to remove hover effects from containers

[CreatorTim]

Hey guys, I want to remove the hover effect from my store so that when I hover over any container—whether it’s in the login section, contact section, or newsletter—nothing happens.

Right now, the borders highlight when I hover over them, but I don’t want that. I just want them to black color without any effects.

You can check it out here: https://1049xn-ya.myshopify.com/pages/contact

Thanks a lot,
Tim

[Hasan112]

Hello @CreatorTim

.footer .field::after{
      box-shadow: unset !important;
 }
.footer .field::before{
   border-radius: unset !important;
  box-shadow: unset !important;
}
.footer .field__input:focus-visible{
   box-shadow: unset !important;
    border-radius: unset !important;
}

Go to Theme > Customization > Theme Setting > CSS

If its helpful , please Like & Accept as solution Thanks

[CreatorTim]

Hey, I don’t want to remove the borders. I want to remove the hover effect so that when I hover over the container, the borders don’t get highlighted.

[Hasan112]

Hello @CreatorTim

.footer .field:hover.field:after {
  box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity)) !important;
}

Check the update code.

please Like & Accept as solution Thanks