How to Replace The Expand Icon (▶) of The <Details> Element

Can I replace the expand icon (▶) of the details element?

Since <summary> has display: list-style, customising the disclosure marker can be done by setting the list-style-type property:

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>

How to style the arrow of details summary elements?

The :hover should be on the details tag (not the summary).

Try this, it will work:

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

details and summary: delete or hide arrow

<!DOCTYPE html>
<html lang="ru">

<head>

    <style>

    summary{
    display: inline;
    {

    </style>

</head>

<body>

        <details>

        <summary>

        <div">menu1</div>

        </summary>

        <div>
        link or image or submenu
        </div>

        </details>

<br><br>
!!! I'm not sure that all browsers will correctly accept such code.

<br><br>
I did this on my site.

</body>
</html>

Styling the HTML5 summary arrow for Firefox

Currently on FF 68 I am able to customise the marker by doing:

summary::marker {
  color: red;
}

Make sure to try to apply the styles in a generic way (AKA avoid nesting classes so you are sure that the traverse is not a problem)

Screenshot of details marker customization

Also, as you probably are adding styles cross browser the below snippet doesn't work properly

summary::marker,
summary::-webkit-details-marker {
    color: $primary;
}

Instead I have to define it separately like so:

summary::marker {
  color: $primary;
}

summary::-webkit-details-marker {
  color: $primary;
}

Changing summary icon background will not work

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>

Where I can get all CSS elements and properties spec reference listed as to each HTML(XHTML) tag?

This site has more info and resources about working with this tag, browser support, and build resources: https://caniuse.com/#feat=details. It may give you some more paths of research.

If you're more concerned about styling, try this answer page.