W3docs
it
Accedi

CSS ::selection Pseudo Elemento

Usa lo pseudo-elemento CSS ::selection per selezionare e stilizzare parti di documento. Scopri le proprietà disponibili e prova gli esempi pratici.

Lo pseudo-elemento ::selection seleziona la parte di un documento che l'utente ha evidenziato — ad esempio, facendo clic e trascinando il mouse sul testo, oppure premendo Ctrl/Cmd + A. Permette di sovrascrivere l'aspetto predefinito dell'evidenziazione del browser, in modo che il testo selezionato corrisponda al tuo brand o migliori il contrasto.

Per impostazione predefinita, il browser disegna il testo selezionato con il colore di evidenziazione del sistema operativo (di solito uno sfondo blu con testo bianco). Usare ::selection sostituisce quel comportamento predefinito per gli elementi che scegli come target.

Questo capitolo tratta la sintassi, le proprietà consentite, le peculiarità dei prefissi del browser e alcuni esempi pratici per testo, colori multipli e campi di modulo.

Perché e quando usarlo

Uno stile di selezione personalizzato è un piccolo dettaglio che fa sembrare un sito rifinito:

  • Coerenza del brand — abbina l'evidenziazione al tuo colore principale invece del blu predefinito del sistema operativo.
  • Leggibilità — su uno sfondo scuro o a basso contrasto, l'evidenziazione predefinita può rendere il testo difficile da leggere; puoi scegliere una combinazione con contrasto garantito.
  • Scoping — applica colori di evidenziazione diversi a sezioni diverse (ad esempio, blocchi di codice rispetto al corpo del testo).

Mantieni il testo selezionato leggibile: imposta sempre sia color che background-color insieme, così da non trovarti mai, ad esempio, con testo bianco su un'evidenziazione quasi bianca.

Quali proprietà sono consentite

::selection ignora la maggior parte del CSS. Solo un insieme ristretto e fisso di proprietà CSS può essere usato per stilizzarlo:

Proprietà come font-size, font-family, margin o transform non hanno effetto sul testo selezionato — la selezione è solo un'evidenziazione al momento del rendering, non una vera casella che puoi spostare o ridimensionare.

Informazione

Firefox ha storicamente usato una forma con prefisso del vendor, ::-moz-selection. Per supportare le versioni precedenti di Firefox, dichiara la regola con prefisso prima della regola standard ::selection, come mostrano gli esempi di seguito.

Questo pseudo-elemento è stato introdotto in CSS Selectors Level 3, poi rimosso, e ora si trova nella specifica CSS Pseudo-Elements Level 4.

Standard e versione

CSS Pseudo-Elements Level 4

Sintassi

CSS ::selection Pseudo Elemento

::selection {
  css declarations;
}

Esempio dello pseudo-elemento ::selection:

Esempio di codice CSS ::selection

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ::-moz-selection {
        color: #eee;
        background: #8ebf42;
      }
      ::selection {
        color: #eee;
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>::selection selector example</h2>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
  </body>
</html>
Provalo tu stesso »

Esempio dello pseudo-elemento ::selection con colori diversi:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .green::-moz-selection {
        background-color: #8ebf42;
      }
      .green::selection {
        background-color: #8ebf42;
      }
      .yellow::-moz-selection {
        background-color: #FFFF19;
      }
      .yellow::selection {
        background-color: #FFFF19;
      }
    </style>
  </head>
  <body>
    <h2>::selection selector example</h2>
    <p>This is a text with the default selection background-color.</p>
    <p class="green">Select this text to see a green background.</p>
    <p class="yellow">Select this text to see a yellow background.</p>
  </body>
</html>
Provalo tu stesso »

Esempio dello pseudo-elemento ::selection con i tag <textarea> e <input>:

CSS ::selection, altro esempio di codice

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input::-moz-selection {
        color: #1c87c9;
        background-color: #eee;
      }
      input::selection {
        color: #1c87c9;
        background-color: #eee;
      }
      textarea::-moz-selection {
        color: white;
        background-color: #8ebf42;
      }
      textarea::selection {
        color: white;
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>::selection selector example</h2>
    <p>Input element</p>
    <form>
      <input type="text" value="Select this input text" />
      <p>Textarea element</p>
      <textarea rows="5" cols="25">Select this textarea text</textarea>
    </form>
  </body>
</html>
Provalo tu stesso »

Cose da tenere a mente

  • Non eredita come le proprietà normali. Una regola ::selection si applica all'elemento che prende come target; non è un valore che si propaga in cascata ai figli selezionati come fa color. Per stilizzare la selezione a livello di sito, scrivi una regola su un selettore ampio come ::selection (corrisponde a tutto) o body ::selection.
  • Lo sfondo deve essere sufficientemente opaco per essere visibile. Un background-color con alpha molto basso può essere difficile da vedere sopra lo sfondo esistente.
  • Limitato al suo elenco di proprietà. Se una dichiarazione sembra non fare nulla, controlla l'elenco consentito sopra — probabilmente viene ignorata.

Per approfondire le singole proprietà utilizzabili qui, vedi color, background-color e text-shadow.

Esercitazione

Pratica
Cosa puoi ottenere usando lo pseudo-elemento ::selection in CSS?
Cosa puoi ottenere usando lo pseudo-elemento ::selection in CSS?
Was this page helpful?