How to customize the default <Details> arrow?

Question

I’m using the HTML5 tag <details> so that the user, when clicking, visualizes some information of a given word. For example:

<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>

Browsers I tested that support this tag (Chrome, Opera and Firefox - Unfortunately Microsoft does not support) render the icon of the tag in the pattern , as shown in the example above or as illustrated in the image below:

To harmonize better to the layout I’m doing, as I could customize this icon, ie change the color, size... or it is possible to even change the icon itself by using CSS?

Answer 1

Using CSS only, one way to do this first would be to hide the marker/indicator, webkit-details-marker using display: none. In this way:

summary::-webkit-details-marker {
  display: none
}

Hence, one must use creativity. I will give an example by adding a "+" when the Details is closed, that is, closed and a "-" when it is open, to see more details and decrease the details. See:

summary::-webkit-details-marker {
  display: none
}
summary:after {
  background: black; 
  content: "+"; 
  color: #fff; 
  float: left;  
  font-weight: bold; 
  padding: 0; 
  text-align: center; 
  width: 20px;
  left: 20px;
  margin-right: 10px;
}
details[open] summary:after {
  content: "-";
}

				<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>

I created the file change_marker_sumary_html5.css on Github for future references.

You can also insert an image from a URL or locally by inserting as background and putting transparency in the marker default. Behold:

summary::-webkit-details-marker {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/right-arrow.svg);
  color: transparent;
}

<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>

See also HTML5 Doctor other details and in the CSS-Tricks.

Answer 2

this way works:

summary{list-style: none;}