問題の内容

detailsタグを使って折りたたみエリアを作成した際に、スマホ画面上で以下の問題が発生しました。

・summary要素の前に「右向きの三角アイコン」が表示される
・PCでスマートフォンサイズで表示した場合は問題なく表示される

これはSafariやiOSのブラウザがdetailsタグにデフォルトスタイルを適用しているために起こっている問題だったので、今回はその解決策を紹介します。

解決方法

SafariやiOSでは、detailsやsummaryにデフォルトのアイコンが適用されます。これを無効化します。

CSS

/* iOSでのデフォルトアイコンを非表示にする */
details summary {
  list-style: none; /* リストスタイルの削除 */
}

/* Safari特有のデフォルトマーカーを非表示にする */
summary::-webkit-details-marker {
  display: none;
}

HTMLのサンプルコードは以下です。

HTML

<details>
    <summary id="question1">質問</summary>
        <div class="answer">
            <p>回答</p>
         </div>
</details>

以上、参考になれば嬉しいです。