web-dev-qa-db-ja.com

ChromeのHTML5 <details>要素にデフォルトで表示される矢印を非表示にするにはどうすればよいですか？

今はまだ早いですが、皆さんがその上にいることも知っています。

HTML5詳細要素 を使用したい：

<details>
<summary>What's the HTML5 details element?</summary>
<p>The details element represents a disclosure widget from which the user can obtain additional information or controls.</p>
</details>

この記事の執筆時点では、Chrome 12ベータ版は、詳細要素の機能を実際に提供する唯一のブラウザです（概要をクリックすると詳細コンテンツが切り替わります）。したがって、次の質問に回答するには、おそらくそのブラウザを使用します。

Chromeの詳細要素にデフォルトで表示される矢印を非表示にする方法を知っていますか？

これは、Webkitの<input type="search" />のデフォルトのスタイルに少し似ています（ http://css-tricks.com/webkit-html5-search-inputs/ を参照）。あなたはそれを変えることができますが、それはそれほど明白ではありません。

[〜＃〜]編集[〜＃〜]

次のCSSコードを試しても成功しませんでした。

details,
details summary {
padding-left:0;
background-image:none;
-webkit-appearance:none;
}

おそらく、details::-webkit-details-disclosure-widgetのような奇妙な疑似セレクターを使用してターゲットにする必要がある可能性があります。

さらに私はこれを 仕様 で見つけました：

最初のコンテナには少なくとも1つのラインボックスが含まれ、そのラインボックスには詳細要素の左パディング内に水平方向に配置された開示ウィジェット（通常は三角形）が含まれることが期待されます。そのウィジェットは、ユーザーが詳細の表示または非表示を要求できるようにすることが期待されています。

csshtmlgoogle-chromesummarydetails
49
DADU

私は自分の質問に答えるつもりはありませんでしたが、私には解決策があります。

コード

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

仕様で許可されているsummary要素を指定しない場合でも、開示ウィジェットは表示されます。

63
DADU

私の現在のコンピューターが動作しないので、これが機能するかどうかはわかりませんChromeで、私が通常使用しているコンピューターにアクセスできませんが、これをcssファイルに追加してみてください。

details > summary:first-of-type {
    list-style-type: none;
}

動作するかどうか教えてください。公式仕様ではなく、推奨事項でしか見ていません。

15
Will Kunkel

これは十分に機能することがわかりました。

::-webkit-details-marker {display：none; }

7
Crystal

私はFirefox 65.0.1を使用しており、この方法で矢印を削除できます。

details > summary {display:block}
2
Taufik Nurrohman

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#Customizing_the_disclosure_widget によると

これは次の方法で実現できます。

details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}
1
thmsnhl

summary ::-webkit-details-marker {font-size:0px}

✔

0
user2121943