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:

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/

回答1:

Use outline:none;

For Instance,

summary{
  outline:none;
}

WORKING DEMO

Hope this helps.

回答2:

Use outline: 0;

summary:focus {
     outline: 0;
}

来源：https://stackoverflow.com/questions/21092055/remove-blue-border-from-open-details-element-in-chrome