如何在Safari浏览器中移除<details>元素的标记？

我尝试了其他帖子推荐的多种解决方案，但在macOS Safari和iOS Safari上均不起作用，该如何移除“Bob”对应的三角形标记？

（截图说明：导航栏中“Bob”旁显示浏览器默认的展开/折叠三角形标记）

我把试过的所有方案都整合到样式表中，甚至过度使用!important强制生效，还用特殊颜色区分不同元素方便排查。

HTML代码 #

<nav class="panel" id="panel">
    <ul>
        <li><a class="major" href="#alice">Alice</a></li>
        <li><details class="major">
            <summary>Bob</summary>
            <a class="minor" href="#apple">Apple</a>
            <a class="minor" href="#berry">Berry</a>
            <a class="minor" href="#cherry">Cherry</a>
        </details></li>
        <li><a class="major" href="#carol">Carol</a></li>
    </ul>
</nav>

原尝试的CSS代码 #

*,
*::before,
*::after {
    box-sizing: border-box;
    list-style: none !important;
}

::-ms-details-marker,
::-moz-details-marker,
::-webkit-details-marker,
::details-marker,
::-ms-marker,
::-moz-marker,
::-webkit-marker,
::marker,
summary::-ms-details-marker,
summary::-moz-details-marker,
summary::-webkit-details-marker,
summary::details-marker,
summary::-ms-marker,
summary::-moz-marker,
summary::-webkit-marker,
summary::marker {
    color: red !important;
    content: '' !important;
    content-visibility: hidden !important;
    display: none !important;
    list-style: none !important;
    opacity: 0 !important;
    padding: 0 !important;
    visibility: hidden !important;
}
details,
summary {
    color: orange !important;
    display: block !important;
    list-style: none !important;
    padding: 0 !important;
}
details::before,
summary::before {
    color: yellow !important;
    content: '' !important;
    content-visibility: hidden !important;
    display: none !important;
    list-style: none !important;
    opacity: 0 !important;
    padding: 0 !important;
    visibility: hidden !important;
}
details::after,
summary::after {
    color: yellow !important;
    content: '' !important;
    content-visibility: hidden !important;
    display: none !important;
    list-style: none !important;
    opacity: 0 !important;
    padding: 0 !important;
    visibility: hidden !important;
}
.major {
    border: 2px solid yellow;
    color: green;
}
.minor {
    border: 1px dashed pink;
    color: gray;
}
.panel a,
.panel summary {
    background-color: wheat;
    cursor: pointer;
    display: block;
    height: 40px;
    width: 100%;
}
.panel li {
    list-style: none;
    margin: 0 auto;
    text-align: center;
}

解决方案 #

Safari对summary的默认标记有特殊渲染逻辑，只需保留以下精简CSS规则即可生效，无需大量冗余选择器和!important：

/* 移除所有浏览器的summary标记 */
summary {
    list-style: none;
}

/* 专门针对Safari的伪元素处理 */
summary::-webkit-details-marker {
    display: none;
}

说明 #

1. summary默认是display: list-item布局，设置list-style: none会直接隐藏默认标记的基础布局
2. ::-webkit-details-marker是Safari专属伪元素，用来控制三角形标记的显示，设置display: none即可彻底移除
3. 将以上规则添加到现有样式中，替换原来冗余的伪元素选择器，就能在macOS和iOS Safari中生效

内容的提问来源于stack exchange，提问作者5260452