Html Woocommerce产品选项-突出显示所选选项

我正在Woocommerce平台上建立一个电子商务基地，并努力解决一件事。 在产品页面上，我有一些选项供用户选择：

在第一张图片上，未选择任何选项

当用户选择一个选项时，我希望它用黑色圈起来，或者用任何指示器来显示选择了哪个选项。现在，不可能看到选择了哪个选项：

---

这些选项是简单的电子商务选项（图像）。我有没有办法告诉用户使用css或javascript选择了哪些选项？

在Google Chrome中，为您的产品选择一个选项，然后右键单击->检查（“法语检查”）。 查看包含所选元素的父元素（div），它应该添加一个“

selected

”类，或者一个等效类，比如“

active

”或“

select

”等。 现在您已经了解了添加到选定选项的类，可以添加如下CSS样式：

.selected {border: 1px solid black;}

将此样式添加到woocommerce主题的“自定义css”中，或添加到主题的自定义css文件中。 此外，这只是一个例子，最好是非常具体的元素，你是针对CSS，以防止所有的元素。选定的类有一个边界在你的网站上。 例如，使用：

.woocommerce-product.choice.selected {border:1px solid black;}

但这将取决于你的woocommerce主题的配置，我不能在没有看到网站的情况下给出准确的答案