htmlcsstags

Remove focus rectangle of details tag (outline:none not working)

I am making some experiments with a <details> tag. As there is an annoying focus rectangle when I open it in Google Chrome, I tried to removed it by adding

details:focus { outline: none; }

But that didn't work. I thought of putting the outline: none with a details[open] selector but it didn't work either. And if I tries with a button it works... Any help?

Solution

  • I recommend restructuring your code by using the <summary> tag. The <summary> tag defines a visible heading for the element. The heading can be clicked to view/hide the details.

    <details>  
    <summary>Details summary</summary>  
    <p>Text here</p>
</details>

summary {
  outline:none;
}

    This will achieve the same result visually. Here is a working example: https://jsfiddle.net/katerynas/zhcfk5ha/1/