htmlcsscss-selectorshtml-tag-detailshtml-tag-summary

How to Highlight "Opened" items in <Summary><Details> implementation in HTML with CSS? (a layout coloring problem)

I've spent quite some time designing my ultimate details/summary HTML FAQ in CSS.

One thing that I cannot get right is the orange background color on opened topics:

Once an item is clicked, I would like the selected topic to be highlited as orange, even if the mouse has moved out, as shown in the picture.

The problem is that now, as soon as the mouse moves out, the selected topics background turns to white.

If I give the details the orange color, then they all turn orange, defeating the whole purpose of highlited items.

I want all the closed items to have a white background, and all opened items to have an orange color.

What have I overlooked?

Bonus: rewrite my CSS and remove all unnecessary stuff, making this a bit more elegant and less cluttered.

enter image description here

html, body {background: #EEE}
article{display:block;
    margin: 40px auto;
    width: 700px;
    }


details{
    background: white;
    overflow: hidden;
    outline: 1px solid black;
    padding: 20px;
    margin-bottom: 1px;
    }

details[open] summary:after {content: "\25BC"}
details:hover {background: #FFD700;}
details[open] summary {
    color: white;
    background: #FFD700;
    margin-bottom: 0px;
    font-weight: bold;
    transition: all .5s ease;
    }

summary {
    cursor: pointer;
    user-select: none;
    display:block;
    padding: 20px;
    margin:-20px;
    }

summary:after {
    content: "\25C1";
    float:right;
    margin-right: 0px; /* Arrow margin */
    width: 20px;
    }

/*details summary::marker {display:none} hides the standard > sign.  Apparently not needed anymore? */
/*summary:focus {outline:0 !important}  hides blue border in chrome. Apparently not needed anymore? */
<article>

<details><summary>First Topic</summary>
Extra uitleg extra uitleg<br>
Extra uitleg extra uitleg
</details>

<details><summary>Second Topic</summary>
Extra uitleg extra uitleg<br>
Extra uitleg extra uitleg
</details>

<details><summary>Third Topic</summary>
Extra uitleg extra uitleg<br>
Extra uitleg extra uitleg
</details>

</article>

Solution

  • You are currently only applying the background to the details element on :hover you also need to apply it to the details element with [open]

    html, body {background: #EEE}
article{display:block;
    margin: 40px auto;
    width: 700px;
    }


details{
    background: white;
    overflow: hidden;
    outline: 1px solid black;
    padding: 20px;
    margin-bottom: 1px;
    }

details[open] summary:after {content: "\25BC"}
details:hover, details[open] {background: #FFD700;}
details[open] summary {
    color: white;
    background: #FFD700;
    margin-bottom: 0px;
    font-weight: bold;
    transition: all .5s ease;
    }

summary {
    cursor: pointer;
    user-select: none;
    display:block;
    padding: 20px;
    margin:-20px;
    }

summary:after {
    content: "\25C1";
    float:right;
    margin-right: 0px; /* Arrow margin */
    width: 20px;
    }

/*details summary::marker {display:none} hides the standard > sign.  Apparently not needed anymore? */
/*summary:focus {outline:0 !important}  hides blue border in chrome. Apparently not needed anymore? */
    <article>

<details><summary>First Topic</summary>
Extra uitleg extra uitleg<br>
Extra uitleg extra uitleg
</details>

<details><summary>Second Topic</summary>
Extra uitleg extra uitleg<br>
Extra uitleg extra uitleg
</details>

<details><summary>Third Topic</summary>
Extra uitleg extra uitleg<br>
Extra uitleg extra uitleg
</details>

</article>