Remove blue border from open
element in Chrome?

Question

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/

Accepted Answer

Use `outline:none;`

For Instance,

```
summary{
  outline:none;
}
```

WORKING DEMO

Hope this helps.

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

Solution

Problem