如何删除摘要元素侧面的箭头？答案

【问题标题】：How to remove the arrow on the side of the summary element?如何删除摘要元素侧面的箭头？
【发布时间】：2020-07-04 20:28:06
【问题描述】：

我在详细信息元素中有一个摘要：

<details>
  <summary>Hello</summary>
</details>

我试过了：

summary {
  display: block; /* works in firefox */
  list-style: none; /* works in firefox */
}

/* didn't work in any browser */
summary::marker,
summary::-webkit-details-marker {
  display: none;
}

/* Solution for Chrome and Safari? */

来自这个问题How can you hide the arrow that is displayed by default on the HTML5 <details> element in Chrome?。

但这些解决方案实际上都不适用于 chrome。

如何在 chrome 中也删除此箭头？

【问题讨论】：

details summary::-webkit-details-marker { display:none; } （从您问题中的链接复制）在 Chrome v80 jsfiddle.net/e2jLzumd987654322@ 中工作。
details > summary::-webkit-details-marker { display: none; } 在 chrome 80 中也适用于我。见本页底部：developer.mozilla.org/en-US/docs/Web/HTML/Element/…
从你的 css 中删除行：summary::marker, - 它似乎破坏了 chrome
这应该是正确的答案

标签： html css

【解决方案1】：

这对我有用！

summary::marker {
  content: "";
}

【讨论】：

【解决方案2】：

summary {
  &::marker {
    content: "";
  }
}

【讨论】：

请注意这是 SASS 而不是纯 CSS

【解决方案3】：

    <!DOCTYPE html>
    <html>

    <head>
        <title>Page Title</title>
        <style>
            summary {
                display: block;
                /* works in firefox */
                list-style: none;
                /* works in firefox */
            }

            summary::after {
                display: block;
                list-style: none;
            }

            summary::-webkit-details-marker {
                display: none;
            }
        </style>
    </head>

    <body>

        <details>
            <summary>Hello</summary>
        </details>

    </body>

    </html>

【讨论】：

您似乎已从 OP 所说的问题中复制/粘贴代码不起作用。没有说明您更改了什么（如果有的话）或为什么它应该解决问题。
@Quentin：不完全是，他们使用summary::after 而不是summary::marker。并不是说只发布代码而不做解释就可以成为一个有用的答案。