Tava querendo remover a seta padrão da tag details/summary
em HTML e achei essa solução de usar o -webkit-details-marker
.
Queria saber o que ela realmente faz, pois não achei nenhum tutorial explicativo na net, apenas achei dizendo para colocar esse pseudo-elemento e iria funcionar. Funcionou, mas gostaria de mais informações sobre ela.
1 Resposta
Segundo a Especificação WHATWG HTML5:
The details element represents a disclosure widget from which the user can obtain additional information or controls.
O elemento details
destina-se a criar um widget que tem por finalidade fornecer ao usuário informações adicionais sobre um conteúdo ou revelar um controle de formulário.
Nesse contexto, dois elementos são relevantes, o <details>
, que é o container para todo o conteúdo a mostrar/esconder e o <summary>
, que contém o sumário e o título da seção, sendo que ele é opcional, pois se não for utilizado, o navegador se encarregara de renderizar um texto padrão para o elemento.
Com o <details>
você pode alterar a visibilidade dos comentários em um blog, perfis de usuários, detalhes de download, formulários complexos ou em aplicações web como mostrado no exemplo a seguir, constante das especificações:
Para estilizar o widget em enginesWebKit
você pode usar a pseudo classe CSS ::-webkit-details-marker
.
details summary::-webkit-details-marker {
background: red;
color: #fff;
font-size: 500%;
}
Para você entender melhor, leia o artigo completo aqui.