user3741124 user3741124 - 2 months ago 10
CSS Question

How to style the arrow of <details> <summary> elements?

I am using this code (also see the JSFiddle) to change the arrow background color on hover. However this doesn't work as the arrow only changes its color on click.



summary::-webkit-details-marker {
color: #B6B6B6;
font-size: 20px;
margin-right: 2px;
}
summary::-webkit-details-marker:hover {
color: red;
}

<details class="DetailContainer">
<summary>Step by Step Guides</summary>
<details class="DetailsOne">
<summary>Getting Started</summary>
<p>1. Signup for a free trial</p>
</details>
<details class="DetailsOne">
<summary>Setting up a backup schedule</summary>
<p>This step assumes you have already signed up and installed the software</p>
</details>
</details>




Answer

hello try this trick hope it will work

 details:hover summary::-webkit-details-marker:hover {
 color:red;
 background:#FFFFFF;
 }
Comments