How to Hide The Arrow That Is Displayed by Default on The HTML5 <Details> Element in Chrome

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.

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>

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 remove the default arrow icon from a dropdown list (select element)?

If you use TailwindCSS
You may take advantage of the appearance-none class.

<select class="appearance-none">
  <option>Yes</option>
  <option>No</option>
  <option>Maybe</option>
</select>

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

Is there a way to remove the triangle that Chrome adds when using the <details> tag?

Try

details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}

It worked in my JSFiddle: https://jsfiddle.net/nhscgwbf/