紀錄工作經驗、相關知識,解決技術相關問題。

CSS

CSS 去除 details tag 在 safari 前面預設箭頭樣式

details tag 常常被用在列表的內容展開縮放,非常方便好用,不需要另外使用JS 進行控制,使用上如下 :

顯示標題 內容內容內容內容內容內容內容內容內容內容
<details>
<summary>顯示標題</summary>
內容內容內容內容內容內容內容內容內容內容
</details>

去除前面箭頭樣式

要去除前面箭頭樣式,舊的方式,是針對 details 與 summary 添加以下樣式:

details ,summary{
 display:block;
}
顯示標題 內容內容內容內容內容內容內容內容內容內容

但這種方法,會在 safari上失效,如果要同時適用於大多數的瀏覽器,上面的做法已經過時,以下直接附上完整樣式:

/*
hide the arrow shown by default on details tag  in safari and chrome
*/

details{
 display:block;
}

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

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

這邊值得注意的是 summary 中的 list-style-type:none,在CSS中使用 list-style:none 也具有相同意思,但這裡實測後不適用,建議使用 list-style-type:none。

發表迴響