how to not display arrow in HTML <details> without using CSS on Safari browser-CodePudding

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?

CodePudding user response：

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>

CodePudding user response：

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>