Shopify产品变体单选框无类名，添加hover变色的实现方案咨询

不用改主题文件：用属性选择器写CSS #

你的单选框虽然没类名，但自带data-variant-input、name这些属性，直接用CSS属性选择器就能搞定hover效果，不用碰主题模板代码。举个例子：

/* 所有变体单选框的hover样式 */
input[type="radio"][data-variant-input]:hover {
  appearance: none; /* 去掉浏览器默认样式 */
  width: 18px;
  height: 18px;
  border: 2px solid #ccc;
  border-radius: 50%;
  background-color: #f0f0f0; /* hover时的背景色 */
}

/* 选中状态下的hover样式 */
input[type="radio"][data-variant-input]:hover:checked {
  background-color: #2563eb; /* 自定义选中hover色 */
}

要是只想给Size选项加效果，就用name属性筛选：

input[type="radio"][name="Size"]:hover {
  /* 写你要的样式 */
}

这种方法省事，还不怕主题更新丢修改。

改主题文件加类名：适合长期定制 #

如果之后还要给这些单选框加更多样式，或者想让选择器更简洁，完全可以编辑主题文件加类名：

1. 找到主题里渲染变体单选框的模板（一般是product-form.liquid或product-variants.liquid这类文件）
2. 在<input type="radio">的class里加个自定义类，比如variant-option-radio
3. 之后直接用类名写CSS：

.variant-option-radio:hover {
  /* 样式代码 */
}

注意改文件前先备份，第三方主题更新可能会覆盖修改，能用到主题自带的自定义代码区或者子主题最好。

之前hover没成功的原因 #

多半是你用的选择器优先级不够，或者单选框的默认样式被浏览器/主题其他CSS覆盖了。按F12打开开发者工具，检查元素的CSS规则，调整选择器优先级就行，尽量别用!important。

内容的提问来源于stack exchange，提问作者user2183346