teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

2

追記

2018/11/01 12:53

投稿

s8_chu
s8_chu

スコア14731

answer CHANGED
@@ -4,4 +4,15 @@
4
4
  display: block;
5
5
  list-style: none;
6
6
  }
7
+ ```
8
+ しかし、Google ChromeやOperaなどの**一部ブラウザでは、`display`プロパティ, `list-style`プロパティを使用しても黒矢印をカスタマイズできません**。これらのブラウザに対応するためには、**`::-webkit-details-marker`疑似要素という非標準の擬似要素を使用する**必要があります。これを考慮すると、最終的に加えるコードは、以下のようになります([動作確認](https://codepen.io/anon/pen/jegvmj))。
9
+ ```CSS
10
+ summary {
11
+ display: block;
12
+ list-style: none;
13
+ }
14
+
15
+ summary::-webkit-details-marker {
16
+ display:none;
17
+ }
7
18
  ```

1

修正

2018/11/01 12:53

投稿

s8_chu
s8_chu

スコア14731

answer CHANGED
@@ -1,4 +1,4 @@
1
- ブラウザは、Webページを表示するとき、**ユーザーエージェントスタイルシート**というCSSをデフォルトで適用しています。今回の黒矢印は、ユーザーエージェントスタイルシートによるものです。この問題を解決するためには、**ユーザーエージェントスタイルシートを上書きする**必要があります。今回は、以下のように`summary`要素に`display`プロパティと`list-style`プロパティを設定することで、質問者さんが実現したいことが行えると思います([動作確認](https://codepen.io/anon/pen/qJeyJb))。
1
+ ブラウザは、Webページを表示するとき、**ユーザーエージェントスタイルシート**というCSSをデフォルトで適用しています。今回の黒矢印は、ユーザーエージェントスタイルシートによるものです。この問題を解決するためには、**ユーザーエージェントスタイルシートを上書きする**必要があります。今回の場合は、`summary`要素に対して、`display`プロパティと`list-style`プロパティを設定することで、質問者さんが実現したいことが行えると思います([動作確認](https://codepen.io/anon/pen/qJeyJb))。
2
2
  ```CSS
3
3
  summary {
4
4
  display: block;