-1

I have to make orange border of swatches like below image

enter image description here

I made round swatches in magneto 2.4 and it look like below image

enter image description here

My css code

.swatch-option{border-radius:50%;min-width: 18px;width: 18px !important;height: 18px !important;border: none;}

Here above image there is a square outline in magento. But I want round outline like first image. How could I achieve this ?

Improve this question
1
  • It might be useful if you could paste the current HTML/CSS markup of the swatches so that people have quicker access to the being able to modify the CSS without needing to setup swatches on a blank Magento.
    – Zudian
    Jun 20, 2021 at 16:15

1 Answer 1

Reset to default
1

Try below css for selected option

.swatch-option.selected{border: 2px solid #ffffff; border-radius: 50%; box-shadow: 0 0 1pt 2pt #ff5501;}

enter image description here

and for hover options

.swatch-option.image:not(.disabled):hover, .swatch-option.color:not(.disabled):hover{outline: none; border: 2px solid #ffffff; border-radius: 50%; box-shadow: 0 0 1pt 2pt #ff5501;}

Thanks!

Improve this answer
7
  • thank you for your code,but your code make smaller selected solid circle,but I want to make outline circle without making small solid cricle.
    – Niraj Patel
    Jun 20, 2021 at 13:10
  • What do you mean by small solid circle. Can't get you.
    – Rahul Barot
    Jun 21, 2021 at 4:32
  • when you make red border and when you increase white border border: 1px solid #ffffff; it makes whilte border gap inside rather than outside so then selected round color makes smaller,but I want make outside white border of selected color
    – Niraj Patel
    Jun 21, 2021 at 12:02
  • @NirajPatel outside red border is achieved using box-shadow. So you can increase outer red border using this box-shadow: 0 0 1pt 3pt #ff5501; when you increase inside white border. Let me know if it works for you. Thanks!
    – Rahul Barot
    Jun 21, 2021 at 14:19
  • you understood wrong. Right now white border put inside, but I want make white border outside.
    – Niraj Patel
    Jun 21, 2021 at 18:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.