A user seeks to remove hover animations from color swatch buttons on their Shopify product page and fix inconsistent sizing (the white swatch appears smaller than others).
Animation Issue:
base.css that applies a border on both :hover and :checked states:checked state, eliminating the hover animationProposed CSS Fix:
Replace the current rule with code that removes the :hover selector while maintaining the checked state styling. The helper suggests adding border-width to ensure consistent borders.
Implementation:
The user needs to locate the specified CSS in base.css and replace it with the corrected code at the bottom of the file.
Note: The size inconsistency issue remains unaddressed in the current discussion.
Hi guys,
On the product page, the color swatch buttons have an animation that I would like to stop. Also, the swatches are not equal in size. The white one is smaller than the others. I would very much appreciate your help.
URL: https://basicbastard.co/products/socks?variant=43307250516204
For the “animation” on hover, that is caused by the line:
.product-form__input input[type="radio"]:checked + .color-swatch, .product-form__input input[type="radio"]:hover + .color-swatch {
border: black;
}
in base.css.
If you want to keep the border for when it’s checked then use this line instead:
.product-form__input input[type="radio"]:checked + .color-swatch {
border: black;
}
Alternatively, make sure there’s always a border width:
.product-form__input input[type="radio"]:checked + .color-swatch, .product-form__input input[type="radio"]:hover + .color-swatch {
border: 1px solid rgb(0 0 0 / 100%);
}
Hi, thank you for trying to help. By the way, I want to keep it as it is. I want to remove the animation only. Do I have to replace any code or paste the last code that you provided at the bottom of .css file?
Replace the line I sent initially in base.css with the one at the bottom