Estou usando a tag HTML5 <details>
para que o usuário, ao clicar, visualize algumas informações de uma determinada palavra. Por exemplo:
<details>
<summary>JavaScript (Clique aqui)</summary>
<p>JavaScript é uma linguagem de programação interpretada. Foi originalmente implementada como parte dos navegadores web para que scripts pudessem ser executados do lado do cliente e interagissem com o usuário sem a necessidade deste script passar pelo servidor, controlando o navegador, realizando comunicação assíncrona e alterando o conteúdo do documento exibido. (fonte: Wikipedia)</p>
</details>
Os navegadores que testei que suportam essa tag (Chrome, Opera e Firefox — infelizmente os da Microsoft não suportam) renderizam o ícone da tag no padrão ▶, como mostra o exemplo acima ou como ilustra a imagem abaixo:
Para harmonizar melhor ao layout que estou fazendo, como eu poderia customizar esse ícone, ou seja, alterar a cor, tamanho... ou é possível, até mesmo, alterar o próprio ícone ▶ por outro usando CSS?