...fictional ex-90s platformer mascot, nerd, plural, ΘΔ.
experimenting with different ways to handle content warnings on the website for a potential future redesign
the <details> and <summary> tags are pretty cool aside from some browsers not liking the list-style: none on the summary so it keeps the little triangle
i believe the triangle is a summary:before that u can cusrltomise with content!
Also keep in mind that details cannot be turned into a flexbox for some reason I don't know why but you'll need to put a flexbox as a div inside the details tag
I use details quite extensively in my website so I've had a bit of experience with styling it
If you want some inspo for styling details then I recently put a section on my page where pretty much all the content is details boxes https://spdx.neocities.org/pages/groups/sciences/exotic/catalogue
It looks really nice in my opinion
oh, those are definitely some nice stylings, and good to know that about flexbox.
(Niss got the answer needed that there's a safari specific selector)
if "some browsers" are safari, then according to mdn you can do
summary::-webkit-details-marker {
display: none
}
does that help?
unfortunately there is no way to target summary:before or summary::-webkit-details-marker with inline css (that is, on cohost). one hack i figured out to get it to disappear on all browsers is to set font-size: 0 on the summary and then reset it manually on the summary's children with font-size: 1rem. very messy, but the dorito is gone
