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/