html - 如何使用 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();

如果迫在眉睫，我会选择与弹出框相匹配的蓝线的形状和大小。

标签： htmlcssmodal-dialog

Answer 1

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

popupDialog:focus {
   outline: none;
}