为 Firefox 设置 HTML5 摘要箭头的样式答案

【问题标题】：Styling the HTML5 summary arrow for Firefox为 Firefox 设置 HTML5 摘要箭头的样式
【发布时间】：2018-08-13 20:41:51
【问题描述】：

我想在 Firefox 上使用 HTML5 summary element。默认情况下，该元素的样式为三角形箭头（参见示例here）。我想改变这个箭头的颜色。 This question 解释了如何在 Chrome 上做到这一点，但在测试后它不适用于 Firefox。

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

【问题讨论】：

标签： css html firefox

【解决方案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>

【讨论】：

【解决方案2】：

目前在 FF 68 上，我可以通过以下方式自定义标记：

summary::marker {
  color: red;
}

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

另外，由于您可能正在跨浏览器添加样式，因此下面的 sn-p 无法正常工作

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

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

summary::marker {
  color: $primary;
}

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

【讨论】：

谢谢！我认为这是目前最好的答案——不需要额外的span，不需要手动重新定义箭头。顺便说一句，我猜你必须单独定义的原因是stackoverflow.com/questions/13816764/…（因为 Firefox 和 Chrome 都不会理解对方的选择器）。

【解决方案3】：

您可以在 Firefox（可能还有 Edge/Safari）中使用 list-style-type 来设置箭头 [css-tricks] 的样式。

/* replace with custom image */
summary {
  list-style-image: url(right-arrow.svg);
}

/* hide arrow */
summary {
  list-style-image: none;
}

【讨论】：

【解决方案4】：

/* Hide default arrow */     
summary::-moz-list-bullet {
   list-style-type: none;
   display: block;
}
/* Create customizable arrow */       
summary:before {
   content: ' ';
   border: solid #939faa;
   border-width: 0 2px 2px 0;
   display: inline-block;
   padding: 0 5px 5px 0;
   transform: rotate(-45deg);
}

http://www.otsukare.info/2016/04/19/summary-details

【讨论】：

【解决方案5】：

问题：如果您使用规范化器（normalize.css 等）或类似的东西，为了在 macOS 的 Firefox 中隐藏 ::marker，您必须同时设置 <summary> 和::marker:

  summary {
    display: block;
  }

  summary::marker {
    display: none;
  }

否则<summary> 将从其他地方（规范化器等）获取其样式，并且可能类似于display: list-item，这将阻止您隐藏标记。

【讨论】：

【解决方案6】：

在 Firefox 中更改 summary 箭头颜色的简单解决方法是更改整个 summary 元素的颜色，并将元素的内容以不同的方式放在 span 中。

例如：

<style type="text/css">
summary {
  color: red;
}
.summary_contents {
  color: black;
}
</style>

还有：

<details>
  <summary>
    <span class="summary_contents">foobar</span>
  </summary>
  [...]
</details>

【讨论】：

【解决方案7】：

details > summary:first-of-type {
    color: blue;
}

此 CSS 可在 Firefox 上使用，但您仍需要在 Chrome 上使用原始方法。

【讨论】：

谢谢，但这会改变整个 summary 元素的颜色（不仅仅是箭头）。也就是说，基于此，我想我可以设置summary 元素的样式（带有箭头），然后将summary 元素的实际内容放在span 中，我会设置不同的样式。如果您认为这是最佳解决方案，请随时相应地编辑您的答案。