A stroke appears on the details tag when you click on Safari and Chrome. It looks like an ordinary outline , but it is not reset through styles:

 :active, :hover, :focus { outline: 0; outline-offset: 0; } details { outline: 0; outline-offset: 0; } 
 <details> Свой заголовок <p>Текст</p> </details>

How to remove this stroke c details ?

enter image description here

    4 answers 4

     summary { outline: none; }
    • I have no summary in the markup. - user232857

    There outline at focus

     details:focus, summary:focus { outline: 0; outline: none; } 
     <details> <summary>Свой заголовок</summary> <p>Текст</p> </details>

    • I have no summary in the markup. - user232857
    • then your markup is not correct, - user33274
    • and without markup "correct" markup really do? - user232857
    • one
      @webDev_ voted for your answer. - user232857

    maybe so? :

     details { outline: none; }
    • I wrote that outline: 0; does not work. And this value is equivalent. - user232857

    You remove the stroke correctly, but the problem is that you write unmarked markup - the title should be wrapped in a summary tag, and it in turn should lie directly in the details .

     :focus { outline: 0; } 
     <details> <summary>Заголовок</summary> <p>Текст</p> </details>