iPhoneで三角形アイコン(ディスクロージャー・トライアングル)が出た時の対処方法

不具合の現象

FAQなどのアコーディオンの表現で、<summary>タグ付きの<details>タグを使用している場合、Safariが自動的に開閉用の三角形アイコン(ディスクロージャー・トライアングル)を表示します。

これは、iOS Safariの仕様であり、HTMLソースに書かれていなくてもブラウザが内部的に描画している要素です。
表示される三角アイコンは、開いているとき「▼」、閉じているとき「▶」のように変化します。以下の画像のような感じです。

■html

<details>
  <summary>質問タイトル</summary>
  <p>回答内容</p>
</details>

対処方法

safariのデフォルトのスタイルをCSSで打ち消すことで、三角形アイコンを消すことができます。

■css

summary {
  list-style: none;
}

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