Question

В браузере Google Chrome (ver. 62) при использовании тега <details> отображается стрелка, а при нажатии еще и синяя рамка:

 

пример использования тега в GC

Но в браузере Mozilla Firefox (ver. 57) такой проблемы нет:

 

пример использования тега в MF

---

Вопрос: как убрать отображение стрелки и синей рамки для GC или же добавить стрелку для всех браузеров, поддерживающим данный тег?

Answer 1

Смотрю в хроме последнем и в Firefox той же версии, стрелки отображаются в обеих браузерах. 

• http://joxi.ru/Dr8RKXlik6P092

Попробуйте блок архив записей заменить на код:

<!-- <block8> -->

<?if($ARCHIVE_LINKS$)?>

<div class="sidebox"><div class="sidetitle"><span><!-- <bt> --><!--<s5347>--><summary>Архив записей</summary><!--</s>--><!-- </bt> --></span></div>

                <div class="inner">

    <!-- <bc> --><details>$ARCHIVE_LINKS$</details><!-- </bc> -->   

                </div>

      <div class="clr"></div>

      </div>

<?endif?>

<!-- </block8> -->

в таком виде как код выше стрелка отображается в обеих браузерах.

Comments

Спасибо за ответ) Но я всё же нашел решение через css без изменения кода, приложу сюда, возможно, кому-то пригодится:

/* Chrome, Opera, Safari */
details summary::-webkit-details-marker {
display: none;
}
details :focus {
  outline: 0;
}
/* Firefox */
details, summary {
display: block;
}
details summary:before {
content: "▲ ";
}
details[open] summary:before {
content: "▼ ";
}