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;


<input value="input">

Read more here:

Content Attribution

This content was originally published by jsv at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: