0

there's a way to remove the arrow and leave only my custom image con the summary code in HTML?

here's the code I used:

<center>
<h1>
PASCAL LOTA</h1>
<details>
  <summary><img src="https://1.bp.blogspot.com/-Gqx6lkmLq_k/XoiKBHj5L9I/AAAAAAAAAi8/gohuLTm_RI8mHLSn5acQTeonA7RYSGyrwCLcBGAsYHQ/s1600/System%2Brequirements.png" /></summary>
   - by Refsnes Data. All Rights Reserved.<br />

  All content and graphics on this web site are the property of the company Refsnes Data.<br />

</details>
</center>

Thank you!

Paolo Mainas
  • 13
  • 1
  • I think it already has an answer here: https://stackoverflow.com/questions/6195329/how-can-you-hide-the-arrow-that-is-displayed-by-default-on-the-html5-details-e – nanquim Apr 05 '20 at 09:36
  • Does this answer your question? [How can you hide the arrow that is displayed by default on the HTML5
    element in Chrome?](https://stackoverflow.com/questions/6195329/how-can-you-hide-the-arrow-that-is-displayed-by-default-on-the-html5-details-e)
     –  Dec 28 '20 at 02:02

1 Answers1

1

You can get it to go away by changing the CSS attribute of the marker to not be displayed. So the arrow goes by the name of details-marker and we set its display:none which stops it from being drawn in. EDIT: I added in a bit of code to stop the <summary> from highlighting blue on click, i thought it was ugly so i fixed it.

<style>
summary:focus {
outline:none !important
}
details > summary::-webkit-details-marker {
display:none;
}
</style>
<center>
<h1>
PASCAL LOTA</h1>
<details>
  <summary><img src="https://1.bp.blogspot.com/-Gqx6lkmLq_k/XoiKBHj5L9I/AAAAAAAAAi8/gohuLTm_RI8mHLSn5acQTeonA7RYSGyrwCLcBGAsYHQ/s1600/System%2Brequirements.png" /></summary>
   - by Refsnes Data. All Rights Reserved.<br />

  All content and graphics on this web site are the property of the company Refsnes Data.<br />

</details>
</center>
JakeTheSnake
  • 372
  • 1
  • 11
  • 1
    Thanks a lot friend! Yes, I wanted to remove the blue highlighting too! Thanks again! – Paolo Mainas Apr 04 '20 at 18:26
  • Paolo, if this answered your question please hit the transparent check mark underneath the arrows on this answer to signify that this post was indeed answered. Im glad i could help :) – JakeTheSnake Apr 04 '20 at 18:34