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



Read more here: https://stackoverflow.com/questions/67013410/remove-outline-from-details-tag-or-expand-and-collapse

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: