details and summary: delete or hide "arrow"

4.2k Views Asked by Aliskin At 27 July 2017 at 09:34

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?

Original Q&A

There are 3 best solutions below

Aliskin On 04 June 2022 at 02:58 BEST ANSWER

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

Raushan Kumar On 28 July 2017 at 06:35

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.

Alex On 15 January 2020 at 09:47

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

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

details and summary: delete or hide "arrow"

There are 3 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in WEBKIT

Related Questions in HTML-TAG-DETAILS

Related Questions in HTML-TAG-SUMMARY

Trending Questions

Popular # Hahtags

Popular Questions