32

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/

Toto
  • 89,455
  • 62
  • 89
  • 125
flossfan
  • 10,554
  • 16
  • 42
  • 53

2 Answers2

67

Use outline:none;

For Instance,

summary{
  outline:none;
}

WORKING DEMO

Hope this helps.

Nitesh
  • 15,425
  • 4
  • 48
  • 60
  • 10
    Actually setting outline:none on **all** HTML elements as in the comment of @SurjithSM is a really bad practise, as users who use the tab button to tab through controls wont see what is focused. Also disabled persons will have problems using such a website. – RononDex Jan 13 '14 at 13:30
  • 2
    Even just this answer is not great for accessibility, how will a user know after tabbing through the page whether summary is focussed or not? – Flimm May 25 '17 at 17:53
4

Use outline: 0;

summary:focus {
     outline: 0;
}
Peratchi Selvam
  • 139
  • 1
  • 6