:focus-visible与Chrome浏览器outline轮廓控制实例页面

回到相关文章 »

效果：

原始状态（点击访问）

  2. summary元素

    Chrome浏览器下点击会出现焦点轮廓。

  3. 我是设置了tabindex="0"的普通div元素。

:focus-visible优化后（Tab键访问）

  2. summary元素

    Chrome浏览器下点击不会出现焦点轮廓。

  3. 我是设置了tabindex="0"的普通div元素。

Chrome67+，若无效请前往chrome://flags开启"Experimental Web Platform features"标示。

代码：

CSS代码：
.cs-button {
    background-color: teal;
    color: #fff;
    border: 0;
    padding: .75em 2em;
}
.focus-better :focus:not(:focus-visible) {
    outline: 0;
}
HTML代码：
<h4>原始状态（点击访问）</h4>
<ol class="demical">
    <li><button class="cs-button">按钮</button></li>
    <li>
        <details>
            <summary>summary元素</summary>
            <p>Chrome浏览器下点击会出现焦点轮廓。</p>
        </details>
    </li>
    <li>
        <div tabindex="0">我是设置了<code>tabindex="0"</code>的普通div元素。</div>
    </li>
</ol>

<h4>:focus-visible优化后（Tab键访问）</h4>
<ol class="demical focus-better">
    <li><button class="cs-button">按钮</button></li>
    <li>
        <details>
            <summary>summary元素</summary>
            <p>Chrome浏览器下点击不会出现焦点轮廓。</p>
        </details>
    </li>
    <li>
        <div tabindex="0">我是设置了<code>tabindex="0"</code>的普通div元素。</div>
    </li>
</ol>