arrow colour

Question

I am trying to change the arror colour only for (Level 2 and Level 3). However, I've tried this method from How to style the arrow of <details> <summary> elements? but it doesn't work. Anyone can help? Thanks in advance.

details summary::-webkit-details-marker {
  color:red;
  background:white;
}

<details>
    <summary>Level 1</summary>
    <details>
        <summary>Level 2</summary>
        <details>
            <summary>Level 3</summary>
        </details>
    </details>
</details>

The method that I tried is inserting this to CSS.

details summary::-webkit-details-marker {
  color:red;
  background:white;
}

Here is the jsFiddle

score 1 · Answer 1 · answered Jan 14 '21 at 03:33

If you need to apply only to sub levels, just add CSS hierarchical selector detail detail .. This will be applied to sub levels but not the top most level.

<details> <!-- Will not be applied -->
  ...
    <details> <!-- Will be applied -->

details details summary::-webkit-details-marker {
  color:red;
  background:white;
}

<details>
    <summary>Level 1</summary>
    <details>
        <summary>Level 2</summary>
        <details>
            <summary>Level 3</summary>
        </details>
    </details>
</details>

arrow colour

1 Answers1