84

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

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の詳細要素にデフォルトで表示される矢印を非表示にする方法を知っていますか?

<input type="search" />これは、Webkitのデフォルトのスタイルに少し似ています( 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つのラインボックスが含まれている必要があり、そのラインボックスには、詳細要素の左側のパディング内に水平に配置された開示ウィジェット(通常は三角形)が含まれている必要があります。そのウィジェットは、ユーザーが詳細の表示または非表示を要求できるようにすることが期待されています。

4

9 に答える 9

112

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

コード

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

仕様で許可されているsummary要素を指定しない場合でも、開示ウィジェットは表示されることに注意してください。

于 2011-06-01T14:23:22.177 に答える
64

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;
}

于 2019-06-18T12:58:43.600 に答える
22

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

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

それが機能するかどうか教えてください、私はそれを公式の仕様ではなく、推奨事項でのみ見ました。

于 2011-06-01T02:25:06.250 に答える
20

2021年に再訪すると、::-webkit-details-markern̶o̶̶l̶o̶n̶g̶e̶r̶はSafariでのみ機能します。::marker他のすべてのbmodernブラウザーの場合、次のように疑似要素をターゲットにする必要があります。

details > summary {
  list-style: none;
}

details > summary::marker, /* Latest Chrome, Edge, Firefox */ 
details > summary::-webkit-details-marker /* Safari */ {
  display: none;
}

Codepen

于 2021-03-26T09:29:54.577 に答える
8

これで十分に機能すると思います。

::-webkit-details-marker {
  display:none;
}
于 2015-07-29T15:45:10.357 に答える
5
summary::-webkit-details-marker {
  font-size:0px
}
于 2013-03-01T17:01:12.140 に答える
5

私はFirefox65.0.1を使用しており、次の方法で矢印を削除できます。

details > summary {display:block}
于 2019-02-26T03:26:25.730 に答える
1

表示を「ブロック」に変更すると、矢印が削除されます。

summary {
    display:block;
}
于 2022-01-03T17:29:05.390 に答える
0

私の例では、list-itemからotherへの表示を上書きするだけの問題であることがわかります。したがって、今日では、flex、gridなどを使用するのと同じ方法でそのタイプを使用します。-これらはすべて紹介属性を持っています。

:)

私の答え: devtoolsを実行し、属性displayやlist-style-type、list-styleにカスタム値を設定するだけです。

details{
background:yellow;
border-radius: 4px;
cursor:pointer;
}

summary{
/* ANSWER BELOW*/
    list-style: none;
/* ANSWER ABOVE*/
    background:green;
    border:1px solid red;
}
<details>detail
<summary>summary</summary
</details>

于 2021-09-14T23:53:22.970 に答える