Como estilizar os elementos "details" e "summary" com CSS?
Utilize CSS para estilizar a tag de resumo do HTML. Bônus com 3 ideias para utilizar como inspiração.
Como utilizar <details> e <summary>?
A utilização dessas tags é bem simples, basta cobrir algum conteúdo com "details" e utilizar "summary" dentro.
Dessa forma:
Como fazer a estilização?
Você pode optar por utilizar classes, mas aqui vamos fazer a chamada direto dos elementos no CSS:
details{ } summary{ } summary::marker{ }
Repare que, além de details e summary, também utilizamos o "::marker", que é referente aos estilos daquela seta que vem por padrão.
Caso você deseja escondê-la, basta utilizar o "display: none":
summary::marker{ display: none; }
Além disso, você também pode utilizar duas notações CSS, para estilos diferentes quando o conteúdo estiver aberto ou não, dessa forma:
details:not([open]){ } details[open]{ }
Bônus: 3 modelos para você se inspirar
Em construção 🚧