2

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 1

1

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.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .