details and summary: delete or hide "arrow"

Question

Code:

<details>
        <summary>Що зробити:</summary>
<div class="txtinsummary">
текст text текст text текст text текст text 
текст text текст text текст text текст text 
</div>
</details>

How to remove the "arrow" in googleBrowser?

In the FFox screenshot "arrow" does not exist.

gesko

In Google Browser is present.

webkit

Is it possible to do so as in FFox?

Possible duplicate of [Replace the expand ( ▶) icon of HTML5 details tag](https://stackoverflow.com/questions/10813581/replace-the-expand-icon-of-html5-details-tag) — funky-future, Mar 14 '18 at 18:25

score 2 · Answer 1 · answered Jan 15 '20 at 09:47

2

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

...is the magic spell you are looking for!

answered Jan 15 '20 at 09:47

Alex

8,245
8
46
55

3

This put me on the right track. Nowadays `::marker` is in the standard, but `display: none` is not allowed, thus has no effect. But one can use `::marker { content: ""; }` to remove the arrow. – Alien426 Jun 22 '20 at 06:53

score 0 · Answer 2 · answered Jul 28 '17 at 06:35

0

It is done with styling unordered list tag . To do this we can use content property in conjunction with the :before pseudo-element. It is demonstrated in below code:

ul{
  list-style: none;
}

ul li:before {
  content: "\2023 \0020";
}

<html>
 <head>
  <link rel="stylesheet" type="text/css" href="style.css"/>
 </head>
 <body>
   <ul>
    <li style="text-decoration:underline">Topic</li>
   </ul>
  </body>
</html>

{ content: "\2023 \0020"; } /* 2023 is hex code of arrow bullet style */ But Before ,We have to declare ul { list-style:none } to remove default list styling.

answered Jul 28 '17 at 06:35

Raushan Kumar

328
1
2
10

if you have any doubts please ask – Raushan Kumar Jul 28 '17 at 06:37
no. I have no ul tag. BUT I understood your approach. I need to replace the arrow with a space. I have completed my question. I did not check your method :(. Today I will check. – Aliskin Jul 28 '17 at 15:45
Already checked. In Ffox and in Google-chrom there is an arrow. – Aliskin Jul 28 '17 at 15:51
Yes.It will be interesting to know how you solved it – Raushan Kumar Jul 28 '17 at 16:00

score 0 · Accepted Answer · answered Jun 04 '22 at 02:58

<!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>

details and summary: delete or hide "arrow"

3 Answers3