我正在 Woocommerce 平台上建立一个电子商务基地，并为一件事而苦苦挣扎。 在产品页面上，我有一些用户可以选择的选项：
在第一张图片上，没有选择任何选项。
当用户选择一个选项时，我希望它用黑色圈起来，或者任何指示符来显示选择了哪个选项。目前，无法查看选择了哪个选项：
这些选项是简单的 Woocommerce 选项（图片）。有什么方法可以向用户指示使用 css 或 javascript 选择了哪些选项？
【问题讨论】：
标签： html css wordpress woocommerce
在 Google Chrome 中，为您的产品选择一个选项，然后右键单击 -> 检查（法语为“inspecter”）。
查看包含所选元素的父元素（显然是 div），它应该添加一个“selected”类，或等效的类，例如“active”或“select”或其他东西。
现在您知道添加到选定选项的类，您可以像这样添加 CSS 样式：
.selected {border: 1px solid black;}
将此样式添加到 woocommerce 主题的“自定义 css”中，或主题中的自定义 css 文件中。 这只是一个示例，最好非常具体地说明您在 CSS 中定位的元素，以防止所有具有 .selected 类的元素在您的网站上都有边框。 例如，使用：
.woocommerce-product.choice.selected {border:1px solid black;}
但这将取决于您的 woocommerce 主题的配置，如果没有看到该网站，我无法给出准确的答案。
【讨论】：