Remove outline from details tag or expand and collapse

When you expand or collapse the details element, there is an outline.

Is there a way to remove this outline on expand/collapse, but not when we switch between elements using the Tab key?

summary {    cursor: pointer;    user-select: none;  }    /* The sledgehammer. It removes focus for both   * select-with-Tab-key and expand events   **/      /* summary:focus { outline: none; } */      /* An attempt of more intelligent approach. However,   * it doesn't really work.   **/    details[open] summary,  summary:active {    outline: none;  }

<button>button</button>    <details>    <summary>summary</summary>    details  </details>    <input value="input">

https://stackoverflow.com/questions/67013410/remove-outline-from-details-tag-or-expand-and-collapse April 09, 2021 at 08:11AM