html 电子邮件中的星级只读

Question

我有一个来自后端源的数字形式的数据，它将确定评级。数值范围从0-5，可以是0.5,1.5,2.5等等

数字可以是 2.5，2 颗半星将填充金色或任何相应颜色。

现在我一直在尝试做不同的事情，但总是失败。我试过在 data-attr 中使用该值，然后根据该值应用样式，但电子邮件不符合 data-attr IMO（对我不起作用）。定位也不起作用。背景图像支持有问题。所以，我有点卡住了。如果有任何解决方法，那将是一个很大的帮助。我现在只在寻找 outlook 和 windows 10 封邮件。

我的代码笔（但不确定）：

https://codepen.io/kenny-kk/pen/eYgMEej

HTML

<ul>
  <li>★</li>
  <li>★</li>
  <li class="active">★</li>
  <li>★</li>
  <li>★</li>
</ul>

以下是电子邮件中 css 支持的指南： https://www.campaignmonitor.com/css/

Answer 1

出于安全考虑，

Javascript 在电子邮件中不受支持。

有潜在的 'interactive' 解决方案利用复选框和单选按钮等表单输入，但电子邮件客户端支持可能很粗略，我怀疑 Outlook 或 Windows 10 Mail 是否会提供支持。

另一个解决方案是使用包含评级值的 URL 的链接，即 http://example.com/?rating=5，在这种情况下，您需要在您的网站上设置一个进程来捕获这些值并相应地更新用户的评级。

部分资源：

使用星级评分通过电子邮件收集反馈 - https://www.campaignmonitor.com/blog/email-marketing/using-star-ratings-to-collect-feedback-via-email/
几年前的 Campaign Monitor 开发示例 - https://dabblet.com/gist/6944624
Codepen 示例 - https://codepen.io/maxxscholten/pen/zxegjL?editors=1000

最终，您将找不到像网站表单一样工作的解决方案。

Answer 2

最好用图片代替这些 Unicode 星号。如果您的数据来自后端，可以将其存储在 data-attr 中，并根据值显示图像。为此，您必须在代码中保留单独的图像（恐怕这是唯一的方法）。各邮寄平台均提供图片支持

mso-hide:all;

这将隐藏您的图像，请务必在 div 元素上使用它。使用此样式取消隐藏该评级星的图像。

[data-star="2.5"]{
mso-hide: unset;
}

html 电子邮件中的星级只读

Star rating readonly in html email

html

email

html-email