A user wants to disable hover effects on input containers across their Shopify store (login, contact, newsletter sections). Currently, borders highlight on hover, but they prefer static black borders with no visual changes.
Initial Solution Attempt:
.footer .field pseudo-elements (:before, :after) to remove box-shadows and border-radiusClarification & Updated Solution:
.footer .field:hover.field:after with modified box-shadow properties to maintain border appearance without the highlight animationStatus: Solution provided with visual confirmation screenshots showing the before/after effect. The discussion appears resolved pending user confirmation.
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
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
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.
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
