设置Firefox的HTML5摘要箭头的样式

Question

我想在Firefox上使用HTML5 summary element。默认情况下，该元素的样式为三角形箭头（请参见示例here）。我想更改此箭头的颜色。 This question解释了如何在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;
}

请确保尝试以通用方式应用样式（也请避免嵌套类，以确保遍历不是问题）

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

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

相反，我必须单独定义它，例如：

summary::marker {
  color: $primary;
}

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

Answer 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;
}

Answer 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

Answer 5

它适用于Chrome，因为在CSS样式中，有一个“ -webkit”前缀。根据{{​​3}}，主流浏览器使用以下前缀：

• -webkit-（Chrome，Safari，Opera的较新版本，几乎所有的iOS浏览器（包括Firefox for iOS）；基本上是任何基于WebKit的浏览器）
• -moz-（Firefox）
• -o-（旧的WebKit版本，Opera版本）
• -ms-（Internet Explorer和Microsoft Edge）

请尝试以下示例，其中添加了Firefox CSS。

details summary::-webkit-details-marker {
  background: red;
  color: #fff;
  font-size: 500%;
}

/* Firefox */
details summary::-moz-details-marker { 
  background: red;
  color: #fff;
  font-size: 500%;
}

Answer 6

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

此CSS可以在Firefox上运行，但是您仍然需要使用Chrome的原始方法。

Answer 7

在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>

Answer 8

陷阱：如果您使用规范化工具（normalize.css等）或类似工具，则要在{strong> macOS 的Firefox中隐藏::marker，则必须同时设置{ {1}}和<summary>：

::marker

否则， summary { display: block; } summary::marker { display: none; } 将从其他地方（规范化器等）获得其样式，并且可能类似于<summary>，这将阻止您隐藏标记。