ブラウザは、Webページを表示するとき、ユーザーエージェントスタイルシートというCSSをデフォルトで適用しています。今回の黒矢印は、ユーザーエージェントスタイルシートによるものです。この問題を解決するためには、ユーザーエージェントスタイルシートを上書きする必要があります。今回の場合は、summary
要素に対して、display
プロパティとlist-style
プロパティを設定することで、質問者さんが実現したいことが行えると思います(動作確認)。
CSS
1summary {
2 display: block;
3 list-style: none;
4}
しかし、Google ChromeやOperaなどの一部ブラウザでは、display
プロパティ, list-style
プロパティを使用しても黒矢印をカスタマイズできません。これらのブラウザに対応するためには、::-webkit-details-marker
疑似要素という非標準の擬似要素を使用する必要があります。これを考慮すると、最終的に加えるコードは、以下のようになります(動作確認)。
CSS
1summary {
2 display: block;
3 list-style: none;
4}
5
6summary::-webkit-details-marker {
7 display:none;
8}
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/11/02 01:31