如何使用 CSS 使焦点线不可见？

Question

我有一个模态。当它弹出时，我得到一条显示焦点的不需要的蓝线？如何在不改变焦点的情况下摆脱它？

模态代码：

 <dialog id="popupDialog" style="display: none;">
   <div role="dialog" aria-labelledby="g-modal-title" tabindex="-1">
     <h1 class="g-heading-l" id="g-modal-title">{{t('sign-out-warning:heading')}}</h1>
     <div class="g-modal-content" role="document">
       p>{{t('sign-out-warning:paragraph')}}</p>
     </div>
     <button class="g-button" id="closePopup">
       {{ t('sign-out-warning:continue') }}
     </button>
   </div>
</dialog>

和脚本：

document.getElementById("popupDialog").showModal();

如果到了紧要关头，我会选择与弹出框匹配的蓝线的形状和大小。

Answer 1

此边框用于显示元素已获得焦点（即您可以输入输入或按下按钮并输入）。您可以使用大纲属性删除它，但是：

popupDialog:focus {
   outline: none;
}

如何使用 CSS 使焦点线不可见？

How can I make a focus line invisible using CSS?

html

css

modal-dialog