为 Firefox 设计 HTML5 摘要箭头样式

Question

我想在 Firefox 上使用 HTML5摘要元素。默认情况下，该元素的样式为三角形箭头（请参阅此处的示例）。我想改变这个箭头的颜色。这个问题解释了如何为 Chrome 做到这一点，但经过测试，它不适用于 Firefox。

有没有办法用 Firefox 更改摘要元素的箭头颜色？

Answer 1

在 Firefox 和 Chrome 中删除插入符号：

details summary { list-style-type: none; } /* Firefox */
details summary::-webkit-details-marker { display: none; } /* Chrome */
details summary::marker { display: none; }

<details>
  <summary>Open/Close</summary>
  Lorem ipsum dolor sit.
</details>

Answer 2

目前在 FF 68 上，我可以通过执行以下操作来自定义标记：

summary::marker {
  color: red;
}

确保尝试以通用方式应用样式（AKA 避免嵌套类，因此您确定遍历不是问题）

此外，由于您可能正在跨浏览器添加样式，因此以下代码段无法正常工作

summary::marker,
summary::-webkit-details-marker {
    color: $primary;
}

相反，我必须像这样单独定义它：

summary::marker {
  color: $primary;
}

summary::-webkit-details-marker {
  color: $primary;
}