使用 Elementor 页面构建器将单选按钮转换为星级

Question

我正在尝试将使用 elementor 页面构建器制作的表单上的所有单选按钮转换为星级选项。

我尝试过使用这个 CSS https://codeconvey.com/css-star-rating-radio-buttons/ 用 .elementor-field-subgroup 替换 .rating - 无效。

我可以使用任何想法吗？

更新：

我试过这个 CSS 和 Jscript：

.elementor-field-group-stars label:after {font-family:eicons; content:"\e933"; color:gold}
.elementor-field-group-stars:hover label:after {content:"\e934"!important;}
.elementor-field-group-stars .elementor-field-option:hover ~ .elementor-field-option > label:after {content:"\e933"!important;}
.elementor-field-group-stars.selected label:after {content:"\e934";}
.elementor-field-group-stars.selected .elementor-field-option.active ~ .elementor-field-option label:after {content:"\e933"}
.elementor-field-group-stars input {display:none!important}
.elementor-field-group-stars label {color:transparent}
.elementor-field-group-stars .elementor-field-option {padding:0!important}


$('.elementor-field-group-stars input').click(function() {
               if($('.elementor-field-group-stars input').is(':checked'))  {
                   $(".elementor-field-group-stars").addClass("selected");
                   $(".elementor-field-option").removeClass("active");
                   $(this).parent().addClass("active");
}
});

一次只适用于一个单选按钮 - 而不是页面上的所有单选按钮 - 关闭 - 但还没有

Answer 1

我不认为您可以使用 Elementor 直接将单选按钮更改为星星，但既然您提到使用它，Elementor 有一个预制的星级小部件可供您使用。根据个人经验，我可以说它运行良好，您可以根据自己的喜好进行设计。

这里是 YouTube 的链接，您可以在其中查看更多信息： https://www.youtube.com/watch?v=3J6LcRzknTc&feature=emb_title