Proprietà CSS appearance

La proprietà appearance in CSS viene utilizzata per controllare l'aspetto dei controlli modulo come pulsanti, checkbox, radio button e altri elementi. Consente di modificare lo stile dei controlli nativi dell'interfaccia utente, garantendo un aspetto coerente tra browser e dispositivi diversi. Nello sviluppo web moderno, appearance: none è il caso d'uso principale per personalizzare i controlli modulo, mentre gli altri valori sono in gran parte deprecati o non standard.

Le proprietà -webkit-appearance e -moz-appearance sono estensioni proprietarie dei vendor utilizzate per applicare lo stile nativo della piattaforma basato sul tema del sistema operativo. Non fanno parte della specifica CSS ufficiale del W3C e sono supportate principalmente dai browser basati su WebKit (Safari, Chrome) e da quelli basati su Gecko (Firefox), rispettivamente.

Se questa proprietà viene utilizzata nei siti web, dovrebbe essere testata con cautela. L'implementazione della proprietà appearance può variare notevolmente, specialmente nei browser più vecchi. Nei browser più recenti, tuttavia, le differenze sono minime.

Attenzione

Si noti che la proprietà "appearance" non è supportata da tutti i browser e il suo comportamento può variare a seconda del browser e del sistema operativo. Inoltre, modificare l'aspetto dei controlli modulo può influire sull'usabilità e sull'accessibilità del sito web, quindi è importante utilizzarla con giudizio.

Valore iniziale	normal
Si applica a	Tutti gli elementi.
Ereditata	No.
Animabile	Sì.
Versione	CSS3
Sintassi DOM	object.style.appearance = "none";

Quando usare `appearance`

In pratica, si ricorre ad appearance in una situazione specifica: si vuole ridefinire completamente lo stile di un controllo modulo e l'aspetto nativo del browser è d'ostacolo. Impostare appearance: none rimuove il rendering nativo di un elemento come una checkbox, un radio button, un menu a tendina <select> o un campo di testo, lasciando una tela bianca su cui applicare bordi, colori e pseudo-elementi personalizzati.

Il compromesso è la responsabilità. I controlli nativi includono gratuitamente indicatori di focus, comportamento da tastiera e convenzioni della piattaforma. Una volta rimossa l'apparenza nativa, è necessario ricostruire gli stati visivi (focus, selezionato, disabilitato) manualmente, altrimenti il controllo diventa confuso e inaccessibile. Per questo motivo:

Usa appearance: none quando hai davvero bisogno di un controllo con stile personalizzato ed è previsto di gestirne gli stati e l'accessibilità.
Per una semplice modifica del colore (il segno di spunta o il colore di riempimento di una checkbox, radio button o cursore range), preferisci la proprietà accent-color — mantiene l'accessibilità nativa e richiede molto meno codice.

Sintassi

Sintassi della proprietà CSS appearance

appearance: none | auto | initial | inherit | icon | window | button | menu | field | desktop | workspace | document | tooltip | dialogue | push-button | hyperlink | radio-button | checkbox | menu-item | tab | menubar | outline-tree | range | signature | password;

Nota

Solo none e auto sono ampiamente supportati nei browser moderni. I valori rimanenti sono in gran parte obsoleti o non standard.

Esempio: una checkbox personalizzata

L'esempio seguente rimuove il rendering nativo della checkbox con appearance: none e la ricrea come un riquadro stilizzato che mostra un segno di spunta quando viene selezionata.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .custom-checkbox input[type="checkbox"] {
        -webkit-appearance: none; /* remove default appearance on Webkit-based browsers */
        -moz-appearance: none; /* remove default appearance on Mozilla-based browsers */
        appearance: none; /* remove default appearance on all other browsers */
        width: 20px;
        height: 20px;
        border: 2px solid #333;
        border-radius: 3px;
        outline: none;
        cursor: pointer;
        margin-right: 10px;
      }

      .custom-checkbox input[type="checkbox"]:checked + label::before {
        content: "\2714"; /* Unicode checkmark symbol */
        display: inline-block;
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        color: #fff;
        background-color: #333;
        border-radius: 2px;
        margin-right: 8px;
      }
    </style>
  </head>
  <body>
    <span class="custom-checkbox">
      <input type="checkbox" id="myCheckbox" name="myCheckbox" />
      <label for="myCheckbox">Checkbox</label>
    </span>
  </body>
</html>

Provalo tu stesso »

Come funziona:

appearance: none (con i prefissi -webkit- e -moz- per i browser più vecchi) rimuove il rendering predefinito della checkbox in modo da poterla stilizzare autonomamente.
Il riquadro della checkbox ottiene larghezza e altezza di 20px, un bordo solido di 2px e un border-radius di 3px per gli angoli arrotondati. Impostare outline su none rimuove l'anello di focus predefinito (nel codice reale, sostituirlo con un proprio stile di focus visibile per l'accessibilità).
Quando la checkbox è selezionata, lo pseudo-elemento ::before sull'elemento <label> adiacente inserisce il segno di spunta Unicode (\2714) all'interno di un riquadro scuro, utilizzando un colore del testo bianco in modo che il segno sia visibile rispetto al background-color.

Nota

Per la semplice personalizzazione del colore dei controlli modulo, il CSS moderno raccomanda di usare la proprietà accent-color al posto di appearance: none. Richiede meno codice e mantiene le funzionalità di accessibilità native.

Un utilizzo molto comune di appearance: none è rimuovere la freccia predefinita e il chrome da un elemento <select> per aggiungere una freccia personalizzata tramite un'immagine di sfondo e controllare padding e bordo.

<!DOCTYPE html>
<html>
  <head>
    <title>Custom select</title>
    <style>
      select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        padding: 8px 32px 8px 12px;
        border: 1px solid #888;
        border-radius: 6px;
        background-color: #fff;
        /* a small SVG chevron as the dropdown arrow */
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"><path d="M2 4l4 4 4-4" stroke="%23333" fill="none" stroke-width="2"/></svg>');
        background-repeat: no-repeat;
        background-position: right 12px center;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <select>
      <option>Choose a fruit</option>
      <option>Apple</option>
      <option>Banana</option>
      <option>Cherry</option>
    </select>
  </body>
</html>

Senza appearance: none, il browser mantiene la sua freccia a tendina nativa e non è possibile sostituirla in modo affidabile. Con essa rimossa, il cursor e la freccia personalizzata sono completamente sotto il tuo controllo.

Valori

Nota

Solo none e auto sono standard e ampiamente supportati. I valori rimanenti sono in gran parte obsoleti o non standard nei browser moderni.

Valore	Descrizione
none	Rimuove tutti gli stili specifici della piattaforma. Nota: `normal` è il valore iniziale effettivo, non `none`.
auto	Lo user agent seleziona lo stile speciale appropriato in base all'elemento. Si comporta come none sugli elementi privi di stile speciale.
icon	Una piccola immagine che rappresenta un oggetto, spesso con un nome o un'etichetta.
window	Un viewport, una superficie con cornice utilizzata per presentare oggetti e contenuti per la visualizzazione e l'interazione dell'utente.
button	Un piccolo oggetto solitamente etichettato con testo che rappresenta una scelta dell'utente.
menu	Un insieme di opzioni tra cui l'utente può scegliere, eventualmente più di una alla volta. Esistono diversi tipi specifici di menu.
field	Un'area fornita all'utente per inserire o modificare un valore, tipicamente tramite tastiera. Esistono diversi campi speciali.
desktop	Una finestra utilizzata per rappresentare un sistema nel suo insieme, che spesso contiene altre finestre.
workspace	Una finestra utilizzata per rappresentare un progetto o un'applicazione che può contenere altre finestre, tipicamente con una barra del titolo che mostra il nome del progetto o dell'applicazione.
document	Una finestra utilizzata per rappresentare un documento utente, tipicamente con una barra del titolo che ne mostra il nome. Può essere usata anche per rappresentare cartelle o directory in un file system.
tooltip	Una finestra utilizzata per visualizzare temporaneamente informazioni o aiuti su un oggetto. Chiamato anche "info" nei colori di sistema CSS2.
dialogue	Una finestra utilizzata per presentare una notifica o alternative tra cui l'utente può scegliere come parte di un'azione intrapresa dall'utente. Chiamato anche "message-box" nei font di sistema CSS2.
push-button	Un pulsante con un bordo circostante, spesso smussato per apparire tridimensionale, come se fosse in rilievo. Chiamato anche "caption" nei font di sistema CSS2.
hyperlink	Un pulsante che rappresenta un collegamento ipertestuale, spesso semplice come testo normale sottolineato e forse colorato diversamente.
radio-button	Un pulsante che indica se è selezionato o meno con un piccolo cerchio accanto all'etichetta. Può essere presente un disco all'interno del cerchio quando il pulsante è selezionato. Uno stato indeterminato (né selezionato né deselezionato) può essere indicato con un altro elemento grafico nel cerchio.
checkbox	L'elemento viene disegnato come una checkbox, includendo solo la parte effettiva della "casella di spunta".
menu-item	Una scelta all'interno di un menu, che può fungere anche da etichetta per un menu annidato (gerarchico).
tab	Un pulsante che rappresenta l'etichetta per un pannello in un'interfaccia a schede.
menubar	Un menu di menu, tipicamente disposto linearmente in una barra orizzontale.
outline-tree	Un menu in cui le opzioni possono essere mostrate o nascoste con piccoli widget, spesso rappresentati da un piccolo triangolo o da segni più e meno.
range	Un controllo che mostra l'opzione corrente, forse graficamente, e consente all'utente di selezionare altre opzioni, ad esempio trascinando un cursore o girando una manopola.
signature	Un campo per inserire una firma.
password	Un campo per inserire una password. Tipicamente il testo viene visualizzato come un insieme di punti o riquadri per oscurare il valore.
initial	Imposta la proprietà al suo valore predefinito.
inherit	Eredita la proprietà dall'elemento padre.

Proprietà correlate

outline — ripristina un indicatore di focus visibile dopo aver rimosso lo stile nativo.
border-radius — arrotonda gli angoli dei controlli personalizzati.
cursor — segnala l'interattività sui controlli ridefiniti.
::before e content — inserisce segni di spunta e icone nei controlli personalizzati.
Proprietà CSS3 — panoramica del set di funzionalità CSS3 a cui appartiene appearance.

Esercizio

Pratica

Qual è la funzione della proprietà CSS appearance?

Viene utilizzata per modificare lo stile di sistema predefinito dei controlli modulo.Viene utilizzata per cambiare il colore di sfondo di una pagina.Automatizza il processo di validazione dei moduli.Fornisce un modo per applicare lo stile nativo in base alla piattaforma dell'utente.Viene utilizzata per creare animazioni in CSS.

Quando usare appearance

Sintassi

Esempio: una checkbox personalizzata

Esempio: un menu a tendina select personalizzato

Valori

Proprietà correlate

Esercizio

Quando usare `appearance`