Changing <summary> icon background will not work - html

Question

I am using the <summary> tag to create a basic drop down.
I have successfully styled it the way I want with an image of a plus sign as the background. However once the <details> tag has been expanded I cannot get the background image to change to a picture of a minus.
I have tried many different multiple variations. On another note does classic Edge actually support <summary>? Compatibility sites say it has been supported since v79 however of all the tutorials showing how to use it don't work in classic Edge.
Is there a way to not show the contents of the <summary> and <details> tags if the browser doesn't support them?
summary {
list-style-image: url(images/more.png);
width: 24px;
height: 24px;
margin-bottom: 5px;
}
summary::-webkit-details-marker {
background: url(images/more.png);
color: transparent;
width: 24px;
height: 24px;
margin-bottom: 10px;
}
summary:after {
list-style-image: url(images/minus.png);
}
summary::-webkit-details-marker:after {
background: url(images/minus.png);
list-style-image: url(images/minus.png);
color: transparent;
width: 24px;
height: 24px;
margin-bottom: 10px;
}
details[open] summary:after {
background: url(images/minus.png);
list-style-image: url(images/minus.png);
}
details::-webkit-details-marker[open] summary::-webkit-details-marker:after {
background: url(images/minus.png);
list-style-image: url(images/minus.png);
}

Answer 1

I have gone back and found a solution that seems to work in all browsers except classic Edge and IE.
Instead of using images I am creating a new marker using CSS only and then updating the contents of the "icon" using CSS.
summary {
cursor: pointer;
font: bold 1em Arial, Helvetica, sans-serif;
padding: 8px 0;
position: relative;
width: 100%;
list-style-image: none;
}
summary::-webkit-details-marker {
display: none
}
summary:after {
background: white;
border-radius: 50%;
content: "+";
border-color: #000000;
border-style: solid;
border-width: 2px;
color: #000000;
float: left;
font-size: 19px;
line-height: 24px;
vertical-align: middle;
margin: -5px 10px 0 0;
padding: 0;
text-align: center;
width: 24px;
height: 24px;
}
details[open] summary:after {
line-height: 22px;
content: "-";
}
<details>
<summary> Expand me</summary>
<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</details>

Answer 2

I hope you want something like this. if its only about a plus and minus sign , you can do this with CSS, no need of images , change the sign color in CSS as per your need
EDIT: Although I am not agree with Connexo's comment below, but in case if you want to use some other approach or the same thing and not the summary tag as he mentioned, There is one more pure CSS option available here, check the next 3 + signs, first one is with Summary tag, and next one with Input
summary {
list-style-image: url(images/more.png);
position: relative;
width: 24px;
height: 24px;
margin-bottom: 5px;
}
summary:after {position: absolute; content: ""; height: 2px; width: 15px; background-color: red; top: 50%; transform: translateY(-50%);}
summary:before {position: absolute; content: ""; height: 2px; width: 15px; background-color: red; top: 50%; transform: translateY(-50%) rotate(90deg);}
summary::-webkit-details-marker {
background: url(images/more.png);
color: transparent;
width: 24px;
height: 24px;
margin-bottom: 10px;
}
summary:after {
list-style-image: url(images/minus.png);
}
details[open] summary:before {
background: url(images/minus.png);
list-style-image: url(images/minus.png);
}
.collapsibles {margin-top: 100px;}
.collapsibles >div {
position: relative;
margin-bottom: 30px;
padding-left: 30px;
}
.collapsibles >div p {opacity: 0; height: 0;}
.collapsibles >div input {position: absolute; height: 20px; width: 20px; top: 0; left: 0; border: 0 !important; outline: none !important;
-webkit-appearance: none; cursor: pointer;}
.collapsibles >div input:after {position: absolute; content: ""; height: 2px; width: 15px; background-color: red; top: 50%; transform: translateY(-50%);}
.collapsibles >div input:before {position: absolute; content: ""; height: 2px; width: 15px; background-color: red; top: 50%; transform: translateY(-50%) rotate(90deg);}
.collapsibles >div input:checked + p{opacity: 1; height: auto;}
.collapsibles >div input:checked:before {
display: none;
}
<h2>With Summary Tag</h2>
<details>
<summary></summary>
<p>Summary Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>
<div class="collapsibles">
<h2>Without Summary Tag</h2>
<div><input type="checkbox"><p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p></div>
<div><input type="checkbox"><p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p></div>
<div><input type="checkbox"><p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p></div>
</div>