CSS 去除 details tag 在 Safari 前面預設箭頭樣式 (summary / ::marker)

HTML 原生的 details tag（搭配 summary 標籤）常被用來製作常見問題（FAQ）或列表內容的展開收合手風琴效果，非常方便好用，完全不需要另外撰寫 JavaScript 進行控制。基本 HTML 結構如下：

<details>
  <summary>顯示標題（點擊展開 / 收合）</summary>
  <p>這裡是展開後顯示的詳細內容段落。</p>
</details>

不過瀏覽器預設會在 summary 標題最前面顯示一個黑色的預設三角形箭頭。如果設計師希望移除這個箭頭，或改放自己設計的 + / - 號與右側箭頭圖示，就需要透過 CSS 將預設標記隱藏。

---

為什麼舊版寫法在 Safari 上會失效？

早期要去除 details tag 前面的預設箭頭，許多教學會建議直接把 summary 的 display: list-item 改為 display: block 或 list-style: none：

/* 舊寫法：在部分新版或特定版本的 Safari 上仍會殘留箭頭 */
details,
summary {
  display: block;
}

但這種方法在蘋果 Safari（尤其是 iOS Safari）瀏覽器上常會失效，因為 WebKit 引擎內部使用了專屬的偽元素 ::-webkit-details-marker 來繪製那個三角形。

---

跨瀏覽器（含 Safari / Chrome / Firefox）完整去除箭頭 CSS 語法

為了同時相容 Chrome、Edge、Firefox 以及 macOS / iOS Safari，建議同時設定 list-style: none 並將標準的 ::marker 與 WebKit 專屬的 ::-webkit-details-marker 一併設為 display: none：

/* 隱藏 details tag 在 Safari、Chrome 與 Firefox 的預設三角形箭頭 */
details {
  display: block;
}

summary {
  display: block; /* 或設為 display: flex 方便排版右側自訂圖示 */
  list-style: none;
  list-style-type: none;
  cursor: pointer;
}

/* 針對 Safari / WebKit 與現代標準瀏覽器隱藏標記偽元素 */
details summary::-webkit-details-marker,
details summary::marker {
  display: none;
  content: "";
}

實測注意事項：在 summary 中除了移除偽元素外，明確寫上 list-style-type: none; 搭配 ::-webkit-details-marker { display: none; } 是確保 iOS Safari 不再出現箭頭最穩定的組合。

---

實戰進階：隱藏預設箭頭後，改用 ::after 自訂右側展開圖示

把預設醜醜的左側黑色三角形隱藏後，實務上最常搭配 CSS 偽元素 ::after 與 cursor: pointer（游標樣式整理可參考 css cursor 鼠標樣式 – 常用屬性整理），並在 details[open] 展開狀態時自動切換為 - 號或旋轉箭頭：

summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

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

/* 收合狀態：在標題最右側顯示 + 號 */
summary::after {
  content: "+";
  font-size: 20px;
  line-height: 1;
  transition: transform 0.2s ease;
}

/* 當 details 展開（具備 open 屬性）時：將 + 號旋轉 45 度變成 × 號（或改為 "-"） */
details[open] > summary::after {
  content: "−";
}

---

參考資料

• MDN Web Docs: The Details disclosure element
• MDN Web Docs: ::marker