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

<p>La <a href="/it/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-classe</a> <a href="/it/docs/Web/CSS">CSS</a> <strong><code>:focus</code></strong> rappresenta un elemento (come l'input di un form) che ha ricevuto focus. Viene attivato di solito quando l'utente fa clic o tap su un elemento o lo seleziona con il tasto "tab" della tastiera.</p>

<pre class="brush: css no-line-numbers">/* Seleziona qualsiasi &lt;input&gt; che ha ricevuto focus */
input:focus {
  color: red;
}</pre>

<div class="blockIndicator note">
<p><strong>Nota:</strong> Questa pseudo-classe is applica solo all'elemento stesso che ha ricevuto il focus. Utilizzare {{CSSxRef(":focus-within")}} se si vuole selezionare un elemento <em>che contiene</em> un elemento che ha ricevuto il focus.</p>
</div>

<h2 id="Sintassi">Sintassi</h2>

{{CSSSyntax}}

<h2 id="Esempio">Esempio</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html no-line-numbers">&lt;input class="red-input" value="I'll be red when focused."&gt;&lt;br&gt;
&lt;input class="blue-input" value="I'll be blue when focused."&gt;</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css highlight[1, 6]">.red-input:focus {
  background: yellow;
  color: red;
}

.blue-input:focus {
  background: yellow;
  color: blue;
}</pre>

<h3 id="Risultato">Risultato</h3>

<p>{{EmbedLiveSample("Example")}}</p>

<h2 id="Interessi_per_lAccessibilità">Interessi per l'Accessibilità</h2>

<p>Assicuratevi che l'indicatore visivo dello stato di focus possa essere visto da persone con problemi di vista. Ciò favorirà anche tutti coloro che utilizzano uno schermo in uno spazio molto illuminato (come all'aperto sotto il sole). Lo <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">standard di contrasto non testuale WCAG 2.1 SC 1.4.11</a> richiede che l'indicatore visivo del focus sia almeno di 3 ad 1.</p>

<ul>
 <li>Indicatori visivi di focus accessibili: <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="focus_outline_none"><code>:focus { outline: none; }</code></h3>

<p>Non eliminate mai semplicemente l'outline del focus (indicatore visibile del focus) senza rimpiazzarlo con un outline che passi lo <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">standard di contrasto non testuale WCAG 2.1 SC 1.4.11</a></p>

<ul>
  <li>Suggerimento veloce: <a href="https://a11yproject.com/posts/never-remove-css-outlines/">Never remove CSS outlines</a></li>
</ul>

<h2 id="Specifiche">Specifiche</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specifica</th>
   <th scope="col">Status</th>
   <th scope="col">Commenti</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("HTML WHATWG", "scripting.html#selector-focus", ":focus")}}</td>
   <td>{{Spec2("HTML WHATWG")}}</td>
   <td>Definisce semantiche specifiche HTML.</td>
  </tr>
  <tr>
   <td>{{SpecName("CSS4 Selectors", "#focus-pseudo", ":focus")}}</td>
   <td>{{Spec2("CSS4 Selectors")}}</td>
   <td>Nessun cambiamento.</td>
  </tr>
  <tr>
   <td>{{SpecName("CSS3 Selectors", "#the-user-action-pseudo-classes-hover-act", ":focus")}}</td>
   <td>{{Spec2("CSS3 Selectors")}}</td>
   <td>Nessun cambiamento.</td>
  </tr>
  <tr>
   <td>{{SpecName("CSS2.1", "selector.html#dynamic-pseudo-classes", ":focus")}}</td>
   <td>{{Spec2("CSS2.1")}}</td>
   <td>Definizione iniziale.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilità_Browser">Compatibilità Browser</h2>

<div>
<div class="hidden">La tabella di compatibilità in questa pagina è generata da dati strutturati. Se volete contribuire ai dati, per piacere controllate <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e mandateci una pull request.</div>

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

<h2 id="Vedi_anche">Vedi anche</h2>

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