48

Web サイトで要素を使用しており<details>、展開/折りたたみ矢印のデザインを変更したいと考えています。既存のキャラクターの代わりに絵を設定することはできますか？

また、矢印の位置を変えることはできますか？要約テキストの横ではなく、右側に配置したい。

4

5 に答える 5

58

<summary>を持っているので、開示マーカーのカスタマイズはdipslay: list-style、プロパティを設定することで実行できます。list-style-type

details > summary {
    list-style-type: '▶️';
}

details[open] > summary {
    list-style-type: '';
}

details {
    border: 1px solid gray;
    border-radius: 0.2rem;
    padding: 0.5rem;
}

details[open] > summary {
    margin-bottom: 0.5rem;
}
<details>
<summary>An example</summary>

With some example text shown when expanded.
</details>

残念ながら、一部の現世代のブラウザ（ええと、Safari…）はまだこれをサポートしていません。回避策の1つは、を設定してから、疑似要素を介してlist-style: noneカスタムを提供することです。これは、さらにカスタマイズを提供するために引き続き使用できます。…まあ、Safariもサポートしていません。非標準のみをサポートしています。また、カスタムコンテンツの設定はサポートされていません。したがって、代わりに、要素を非表示にして、実際のアイコンを次のように設定する必要があります。content::marker::marker::-webkit-details-marker::before

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

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

details > summary::before {
    content: '▶️';
}

details[open] > summary::before {
    content: '';
}

details {
    border: 1px solid gray;
    border-radius: 0.2rem;
    padding: 0.5rem;
}

details[open] > summary {
    margin-bottom: 0.5rem;
}
<details>
<summary>An example</summary>

With some example text shown when expanded.
</details>

于 2012-05-30T09:37:33.253 に答える
6

既存のキャラクターの代わりに絵を設定することはできますか？

これは確かに可能です - バスクグラウンド イメージをアイコンに設定し、元のマーカーの色を透明に設定すると、この効果が得られます。

例：

details summary::-webkit-details-marker {
    background: url(/images/toggle-expand.png) center no-repeat;
    color: transparent;
}
details[open] summary::-webkit-details-marker {
    background: url(/images/toggle-collapse.png) center no-repeat;
    color: transparent;
}

これは、Webkit ブラウザーと Chrome でのみ機能します。アイコンを別のアイコンに置き換えるのではなく、回転させることを検討したい場合があります。その場合は、次を使用できます。

summary::--webkit-details-marker {
    transform: rotate(-90deg);
}

details[open] summary::--webkit-details-marker {
    transform: rotate(0deg);
}

[dir="rtl"] summary::--webkit-details-marker {
    transform: rotate(90deg);
}

[dir="rtl"] details[open] summary::--webkit-details-marker {
    transform: rotate(0deg);
}

このソリューションは、アイコンが元々下向きである場合にアイコンを回転させます。また、detailsRTL の親内にある要素も考慮に入れます。ただし、ドキュメント全体で複数のテキスト方向が使用されている場合は、このアプローチに注意してください。

于 2015-09-17T00:20:57.013 に答える
1

私が見つけた最良のコードはhttp://html5doctor.com/the-details-and-summary-elements/にありました。この巧妙な小さなトリックが有効です。また、疑似要素のアイコンを置き換えたいものを何でも配置できます。

summary::-webkit-details-marker {
  display: none
}
summary:after {
  background: red;
  border-radius: 5px;
  content: "+";
  color: #fff;
  float: left;
  font-size: 1.5em;
  font-weight: bold;
  margin: -5px 10px 0 0;
  padding: 0;
  text-align: center;
  width: 20px;
}
details[open] summary:after {
  content: "-";
}

コード出力の画像

開発ツールを使用して動作を確認できる小さなサイトへのリンクhttp://output.jsbin.com/egefop/15#html,live

于 2020-08-10T01:38:18.707 に答える