---
title: ':focus-visible'
slug: 'Web/CSS/:focus-visible'
tags:
  - ':focus'
  - ':focus-visible'
  - CSS
  - Experimental
  - Layout
  - Pseudo-class
  - Reference
  - Selector
  - Web
translation_of: 'Web/CSS/:focus-visible'
---
<div>{{CSSRef}}</div>

<p><strong><code>:focus-visible</code></strong> 擬似クラスは、要素が {{CSSxRef(":focus")}} 擬似クラスに一致している時で、{{glossary("User Agent", "ユーザーエージェント")}}が要素にフォーカスを明示するべきであると発見的に指定した場合 (多くのブラウザーではこの場合、「フォーカスリング」を表示します) に適用されます。</p>

<p>このセレクターは、ユーザーの入力方法 (マウスなのかキーボードなのか) によって異なるフォーカス表示を提供したい場合に便利です。</p>

<p>なお、 Firefox は似た機能をより古い接頭辞付きの擬似クラス、 {{CSSxRef(":-moz-focusring")}} で対応しています。</p>

<h2 id="Syntax" name="Syntax">構文</h2>

{{CSSSyntax}}

<h2 id="Examples" name="Examples">例</h2>

<h3 id="Basic_example" name="Basic_example">基本的な例</h3>

<p>この例では、 <code>:focus-visible</code> セレクターはユーザーエージェントの動作を使用して一致するタイミングを判断します。マウスでそれぞれのコントロールをクリックしたときと、キーボードを使用してタブ移動したときとで、何が起こるかを比較してみてください。なお、 <code>:focus</code> でスタイル付けされた要素との動作の違いに注意してください。</p>

<pre class="brush: html notranslate">&lt;input value="Default styles"&gt;&lt;br&gt;
&lt;button&gt;Default styles&lt;/button&gt;&lt;br&gt;
&lt;input class="focus-only" value=":focus only"&gt;&lt;br&gt;
&lt;button class="focus-only"&gt;:focus only&lt;/button&gt;&lt;br&gt;
&lt;input class="focus-visible-only" value=":focus-visible only"&gt;&lt;br&gt;
&lt;button class="focus-visible-only"&gt;:focus-visible only&lt;/button&gt;</pre>

<pre class="brush: css highlight[9] notranslate">input, button {
  margin: 10px;
}

.focus-only:focus {
  outline: 2px solid black;
}

.focus-visible-only:focus-visible {
  outline: 4px dashed darkorange;
}
</pre>

<p>{{EmbedLiveSample("Basic_example", "100%", 300)}}</p>

<h3 id="Selectively_showing_the_focus_indicator" name="Selectively_showing_the_focus_indicator">フォーカスインジケーターの選択的な表示</h3>

<p>カスタムコントロール、例えば <a href="/ja/docs/User:Andreas_Wuest/Custom_Elements">カスタム要素</a>ボタンなどは、 <code>:focus-visible</code> を使用してキーボードフォーカスに対してのみフォーカスインジケーターを選択的に適用することができます。これは {{htmlelement("button")}} のようなコントロールのネイティブのフォーカスの動作に一致します。</p>

<pre class="brush: html notranslate">&lt;custom-button tabindex="0" role="button"&gt;Click Me&lt;/custom-button&gt;</pre>

<pre class="brush: css highlight[13, 19] notranslate">custom-button {
  display: inline-block;
  margin: 10px;
}

custom-button:focus {
  /* Provide a fallback style for browsers
     that don't support :focus-visible */
  outline: none;
  background: lightgrey;
}

custom-button:focus:not(:focus-visible) {
  /* Remove the focus indicator on mouse-focus for browsers
     that do support :focus-visible */
  background: transparent;
}

custom-button:focus-visible {
  /* Draw a very noticeable focus style for
     keyboard-focus on browsers that do support
     :focus-visible */
  outline: 4px dashed darkorange;
  background: transparent;
}</pre>

<p>{{EmbedLiveSample("Selectively_showing_the_focus_indicator", "100%", 300)}}</p>

<h2 id="Polyfill" name="Polyfill">ポリフィル</h2>

<p><a href="https://github.com/WICG/focus-visible">focus-visible.js</a> を使用して <code>:focus-visible</code> のポリフィルにすることができます。</p>

<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>

<h3 id="Low_vision" name="Low_vision">弱視</h3>

<p>視覚的なフォーカスインジケーターが、弱視の人々からも見えるように確認してください。これは外光が明るい場所 (太陽の下の屋外など) で画面を使用するすべての人にも利益になります。 <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">WCAG 2.1 SC 1.4.11 Non-Text Contrast</a> は、視覚的なフォーカスインジケーターを少なくとも 3:1 にすることを要求しています。</p>

<ul>
 <li>アクセシブルな視覚的フォーカスインジケーター: <a href="https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/">Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators</a></li>
</ul>

<h3 id="Cognition" name="Cognition">認知障碍</h3>

<p>人が形式が混在した入力フィールドを使用している場合、フォーカスインジケーターが表示されたり消えたりする理由が明確に分からないかもしれません。認知的な懸念のあるユーザーや技術的なリテラシーの低いユーザーにとっては、対話的要素が一貫した動作をしていないと、混乱を招くかもしれません。</p>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("CSS4 Selectors", "#the-focus-visible-pseudo", ":focus-visible")}}</td>
   <td>{{Spec2("CSS4 Selectors")}}</td>
   <td>初回定義</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<p>{{Compat("css.selectors.focus-visible")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>{{CSSxRef(":focus")}}</li>
 <li>{{CSSxRef(":focus-within")}}</li>
</ul>