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

user_17838340 0
Viewed 108

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?

web html
2 Answers

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 the style="" method for the pseudo-elements

but if your cms support writing your own HTML,
you can nest the CSS above inside the <style> tag

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>

user_177168370

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>
user_132755490
Related