How to Style the Arrow of <Details> <Summary> Elements

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;
 }

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;
}

How can you hide the arrow that is displayed by default on the HTML5 details element in Chrome?

I didn't plan to answer my own question but I have the solution.

Source:
http://trac.webkit.org/timeline?from=2011-04-15T16%3A33%3A41-0700&precision=second
More about the recommendation for the disclosure widget:

http://mail-archive.com/whatwg@lists.whatwg.org/msg26129.html

Code

details summary::-webkit-details-marker {
  display:none;
}

Note that the disclosure widget will still be displayed if you don't provide a summary element, which is allowed by the spec.

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>

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>

How to properly position the arrow in details CSS

use :before instead of :after

 summary::-webkit-details-marker { display: none} summary:before { content: "+"; color: red; float: left; margin-right: 10px; }
 details[open] summary:before { content: "-"; }

<details>  <summary>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut   gravida iaculis arcu, et hendrerit arcu. Morbi rhoncus ex quam, quis.  </summary>  Content goes here.</details>

Remove arrow from the summary HTML

You can get it to go away by changing the CSS attribute of the marker to not be displayed. So the arrow goes by the name of details-marker and we set its display:none which stops it from being drawn in.
EDIT: I added in a bit of code to stop the <summary> from highlighting blue on click, i thought it was ugly so i fixed it.

<style>summary:focus {outline:none !important}details > summary::-webkit-details-marker {display:none;}</style><center><h1>PASCAL LOTA</h1><details>  <summary><img src="https://1.bp.blogspot.com/-Gqx6lkmLq_k/XoiKBHj5L9I/AAAAAAAAAi8/gohuLTm_RI8mHLSn5acQTeonA7RYSGyrwCLcBGAsYHQ/s1600/System%2Brequirements.png" /></summary>   - by Refsnes Data. All Rights Reserved.<br />
  All content and graphics on this web site are the property of the company Refsnes Data.<br />
</details></center>

How to Style the Arrow of <Details> <Summary> Elements