如何从 Safari 上的 <details> 元素中删除标记？

Question

我已经尝试了其他帖子中建议的许多解决方案。两者均不适用于 macOS Safari 或 iOS Safari。我缺少什么，如何删除“Bob”上的三角形标记？

截图：

下面的样式表使用的代码比我最初编写的要多，但它显示了我如何尝试其他帖子建议的所有内容。

并且它过度使用

!important

标志来额外确保它们正在工作。

它还使用奇怪的颜色来区分哪些元素是哪些。

现场演示在这里：https://jsbin.com/cepufayodo/edit?html,css,output

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

*,
*::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;
}

Answer 1

根据这个问题

details summary::-webkit-details-marker {
        display: none;
      }