如何在 HTML 中不显示箭头<details>在 Safari 浏览器上不使用 CSS</details>

Question

I'am building my homepage on webpage building platform such as Wix, Wordpress. But my platform does not support importing css files... I used 'details' tag on my homepage. But I found that it doesn't showing arrow on a chrome browser but on safari browser it shows arraow. I want to hide arrows on safari too.

So I tried this code.

<details style="list-style:none;">
   <summary style="list-style:none;font-size:14px; cursor:pointer;">Open</summary>
</details>

I put 'list-style:none;' but it still doesn't working. So is there some way to not display arrows without using cssfile?

Answer 1

Actually, the answer is very simple, but not intuitive.

---

use display: block; in summary

 summary { display: block; }

 <details> <summary>hello world</summary> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque quos exercitationem quis delectus. Nisi, porro, Possimus placeat quasi aliquid, aperiam ex, adipisci fugiat similique, minima autem assumenda quod quis officiis!</p> </details>

you can use the same method you see above, with style="display: block;" if your CMS doesn't support importing .css files
is only one CSS property, so you can. (this is the easiest solution for now)

---

---

OR I see now on the internet, there you can style this pseudo-element ::-webkit-details-marker

everything starts with 2colons :: like this ::NameOfPsudoElement is pseudo-element)

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

but I don't think your CMS will support uploading external .css file, because you can't use style="" method for the pseudo-elements

---

So for me go for the first answer!

 summary { display: block; }

 <details> <summary>hello world</summary> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque quos exercitationem quis delectus. Nisi, porro, Possimus placeat quasi aliquid, aperiam ex, adipisci fugiat similique, minima autem assumenda quod quis officiis!</p> </details>

Answer 2

You can't target pseudo-classes or pseudo-elements in inline style, so the only option if you still want to write it in HTML file would be like so:

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