Удалить синюю рамку из открытого элемента ‹details› в Chrome?

Я обновляю свой сайт, чтобы использовать новый элемент HTML5 details для лучшей доступности.

Все работает нормально, но, к сожалению, когда я нажимаю, чтобы открыть элемент, Chrome применяет уродливую синюю рамку:

введите здесь описание изображения

Можно ли как-нибудь остановить Chrome? Я не вижу явных примененных стилей CSS, поэтому не знаю, как от этого избавиться.

Код JSFiddle для демонстрации проблемы: http://jsfiddle.net/6x2Kc/


google-chrome html css details
person flossfan    schedule 13.01.2014    source источник

Ответы (2)


arrow_upward
66
arrow_downward

Используйте 1_

Например,

summary{
  outline:none;
}

РАБОЧАЯ ДЕМО

Надеюсь это поможет.

person Nitesh    schedule 13.01.2014
comment
На самом деле установка структуры: нет для всех элементов HTML, как в комментарии @SurjithSM, является действительно плохой практикой, поскольку пользователи, которые используют кнопку вкладки для перехода по элементам управления, не увидят, что находится в фокусе. Также проблемы с использованием такого веб-сайта возникнут у людей с ограниченными возможностями. - person RononDex; 13.01.2014
comment
Даже просто этот ответ не очень хорош для доступности, как пользователь узнает после перехода по странице, сфокусировано ли резюме или нет? - person Flimm; 25.05.2017

arrow_upward
4
arrow_downward

Использовать контур: 0;

summary:focus {
     outline: 0;
}
person Peratchi Selvam    schedule 17.04.2019