<details> <summary> cssで三角矢印を消したい

###前提・実現したいこと

<details> <summary> の三角矢印をcssで消したいのですがやり方がわかりません。ググっても情報が少なく解決できませんでした。ご存知の方いらっしゃいましたらよろしくお願いいたします。

###試したこと

css
1details summary {
2    list-style: none;
3}

css
1details summary {
2    -webkit-appearance: none;
3    -moz-appearance: none;
4    appearance: none;
5}

いずれもダメでした。

行動規範の内容に同意します

回答2件

自己解決

ご回答いただきありがとうございました。

下記の方法で解決しました。

HTML
1<details>
2<summary><span>・・・・・・</span></summary>
3<p>・・・・・・</p>
4</details>

CSS
1details summary {
2    color: transparent;
3}
4details summary span {
5    color: #000;
6}

投稿2017/07/07 09:28

総合スコア21

トリッキーな方法ですが
方法1

CSS
1details {
2    overflow-x: hidden;
3}
4
5summary {
6    text-indent: -1em;
7}

方法2

CSS
1summary {
2    clip-path: inset(0 0 0 1em);
3}

どちらも、クリックすると枠線が出て違和感ありますね。
もっといい方法があるでしょうか？

投稿2017/06/29 07:39

総合スコア13749

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.31%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問をすることでしか得られない、回答やアドバイスがある。