Search code examples
htmlcssgoogle-chromehtml-tag-details

Remove blue border from open <details> element in Chrome?


I'm upgrading my site to use the new HTML5 details element for better accessibility.

It's all working OK, but unfortunately when I click to open the element, Chrome applies an ugly blue border:

enter image description here

Is there any way I can stop Chrome doing this? I can't see any explicit CSS styles being applied, so I'm not sure how to get rid of it.

JSFiddle code here to demo the problem: http://jsfiddle.net/6x2Kc/


Solution

  • Use outline:none;

    For Instance,

    summary{
      outline:none;
    }
    

    WORKING DEMO

    Hope this helps.