CSS list-style-type not being applied on <details><summary> on safari

Hey everyone, I'm actually using tailwind but have tried it with css and the behavior is the same:

<details class="group list-none before:hidden">
   <summary class="cursor-pointer list-none text-xl">
   </summary>
</details>

<details class="group list-none before:hidden">
   <summary class="cursor-pointer list-none text-xl">
   </summary>
</details>

works great, at least in Chrome, i mean, the native carret for summary is not rendered. In Safari, though, it does appear, messing up my custom styling

5 Replies

Chris Bolson•6mo ago

Try this:

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

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

If you prefer/need to do it directly in Tailwind this should work:

[&::-webkit-details-marker]:hidden

[&::-webkit-details-marker]:hidden

rubberduckiesOP•6mo ago

perfect, it works. Thank you @Chris

ἔρως•6mo ago

by the way, you have to keep both methods you need the list-none as well

rubberduckiesOP•6mo ago

thank you, i know that

ἔρως•6mo ago

you're welcome you don't need the list-none in the <details>, by the way

Gaming

Programming

CSS list-style-type not being applied on <details><summary> on safari