CSS实现Forminator单选表单选中图片放大失效问题求助

Forminator插件在单选框被选中时，会给对应的选项容器自动添加forminator-selected类，我们可以利用这个类实现选中后图片保持放大的效果，同时保留悬停动画：

1. 先设置鼠标悬停时的平滑放大效果：

/* 鼠标悬停时图片放大并添加过渡动画 */
.forminator-radio label:hover img {
  transform: scale(1.2); /* 可按需调整放大比例，比如1.1对应放大10% */
  transition: transform 0.3s ease-in-out; /* 控制过渡平滑度，数值越大动画越慢 */
}

2. 再设置选中状态下的图片放大效果：

/* 选中后图片维持放大状态 */
.forminator-radio.forminator-selected label img {
  transform: scale(1.2);
}

如果上述选择器不生效，可尝试基于单选框的:checked伪类结合兄弟选择器（适用于input与label为相邻元素的结构）：

.forminator-radio input[type="radio"]:checked + label img {
  transform: scale(1.2);
}

补充说明 #

• 若插件默认样式覆盖了自定义CSS，可以通过增加选择器优先级解决，比如加上表单的ID（假设表单ID为#forminator-module-456）：

#forminator-module-456 .forminator-radio.forminator-selected label img {
  transform: scale(1.2);
}

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