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.
In Google Browser is present.
Is it possible to do so as in FFox?
3 answers
solution1
2 2020-01-15 09:47:44
details > summary::-webkit-details-marker { display: none; }
...is the magic spell you are looking for!
solution2
0 2017-07-28 06:35:27
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.
solution3
0 ACCPTED 2022-06-04 02:58:01
<!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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.