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