Proprietà CSS appearance
La proprietà CSS appearance permette agli sviluppatori web di modificare l'aspetto degli elementi HTML per farli somigliare ai controlli nativi dell'interfaccia utente. Scopri i valori e prova gli esempi.
La proprietà appearance in CSS si usa per controllare l'aspetto dei controlli dei form, come pulsanti, checkbox, radio button e altri. Permette di modificare lo stile dei controlli nativi dell'interfaccia utente, garantendo un aspetto e uno stile coerenti tra diversi browser e dispositivi. Nello sviluppo web moderno, appearance: none è il caso d'uso principale per personalizzare i controlli dei form, mentre gli altri valori sono in gran parte deprecati o non standard.
Le proprietà -webkit-appearance e -moz-appearance sono estensioni proprietarie dei vendor usate per applicare uno stile nativo della piattaforma in base al 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 su Gecko (Firefox), rispettivamente.
Se questa proprietà viene usata nei siti web, va testata con cautela. L'implementazione della proprietà appearance può essere piuttosto diversa, soprattutto nei browser più datati. Nei browser più recenti, invece, ci sono solo piccole differenze.
Tieni presente 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 dei form può influire sull'usabilità e sull'accessibilità del tuo sito web, quindi è importante usarla con giudizio.
| Valore iniziale | normal |
|---|---|
| Si applica a | Tutti gli elementi. |
| Ereditata | No. |
| Animabile | Sì. |
| Versione | CSS3 |
| Sintassi DOM | object.style.appearance = "none"; |
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;Solo none e auto sono ampiamente supportati nei browser moderni. I restanti valori sono in gran parte obsoleti o non standard.
Esempio della proprietà appearance:
Esempio della proprietà CSS appearance con il valore button
<!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>In questo esempio, per prima cosa rimuoviamo l'aspetto predefinito della checkbox impostando la proprietà appearance su none. Definiamo poi l'aspetto personalizzato della checkbox tramite regole CSS.
La checkbox ha una larghezza e un'altezza di 20 pixel, un bordo solido di 2 pixel e un border-radius di 3 pixel per arrotondarne gli angoli. Impostiamo inoltre la proprietà outline su none per rimuovere il contorno che appare attorno alla checkbox quando riceve il focus.
Per mostrare un segno di spunta quando la checkbox è selezionata, usiamo lo pseudo-elemento ::before sull'elemento <label> adiacente, per creare un box di contenuto con il simbolo Unicode del segno di spunta (\2714) come contenuto. Assegniamo a questo box una larghezza e un'altezza di 20 pixel, un colore di sfondo #333 e un border-radius di 2 pixel per dargli l'aspetto di un quadrato arrotondato. Impostiamo inoltre il colore del testo su bianco per far risaltare il segno di spunta sullo sfondo scuro.
Per una semplice personalizzazione del colore dei controlli dei form, i CSS moderni consigliano di usare la proprietà accent-color invece di appearance: none. Richiede meno codice e mantiene le funzionalità native di accessibilità.
Valori
Solo none e auto sono standard e ampiamente supportati. I restanti valori sono in gran parte obsoleti o non standard nei browser moderni.
| Valore | Descrizione |
|---|---|
| none | Rimuove tutto lo stile specifico della piattaforma. Nota: normal è il vero valore iniziale, non none. |
| auto | Lo user agent seleziona lo stile speciale appropriato in base all'elemento. Agisce come none sugli elementi privi di stile speciale. |
| icon | Una piccola immagine che rappresenta un oggetto, spesso con un nome o un'etichetta. |
| window | Una viewport, una superficie incorniciata usata per presentare oggetti e contenuti per la visualizzazione e l'interazione dell'utente. |
| button | Un piccolo oggetto, di solito etichettato con del 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 in cui l'utente può inserire o modificare un valore, di solito usando una tastiera. Esistono diversi campi speciali. |
| desktop | Una finestra usata per rappresentare un sistema nel suo insieme, che spesso contiene altre finestre. |
| workspace | Una finestra usata per rappresentare un progetto o un'applicazione che può contenere altre finestre, di solito con una barra del titolo che mostra il nome del progetto o dell'applicazione. |
| document | Una finestra usata per rappresentare un documento dell'utente, di solito con una barra del titolo che ne mostra il nome. Può anche essere usata per rappresentare cartelle o directory in un file system. |
| tooltip | Una finestra usata per visualizzare temporaneamente informazioni o aiuto su un oggetto. Chiamata anche "info" nei colori di sistema CSS2. |
| dialogue | Una finestra usata per presentare una notifica o delle alternative tra cui l'utente può scegliere nell'ambito di un'azione intrapresa dall'utente. Chiamata anche "message-box" nei font di sistema CSS2. |
| push-button | Un pulsante con un bordo che lo circonda, 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 un testo normale sottolineato ed eventualmente colorato in modo diverso. |
| radio-button | Un pulsante che indica se è selezionato o meno con un piccolo cerchio accanto all'etichetta del pulsante. Quando il pulsante è selezionato, all'interno del cerchio può esserci un dischetto. Uno stato indeterminato (né selezionato né deselezionato) può essere indicato con qualche altro elemento grafico nel cerchio. |
| checkbox | L'elemento viene disegnato come una checkbox, includendo solo la parte effettiva della "casella". |
| menu-item | Una scelta all'interno di un menu, che può anche fungere da etichetta per un menu annidato (gerarchico). |
| tab | Un pulsante che rappresenta l'etichetta di un riquadro in un'interfaccia a schede. |
| menubar | Un menu di menu, di solito disposti linearmente in una barra orizzontale. |
| outline-tree | Un menu in cui le opzioni possono essere mostrate o nascoste tramite piccoli widget, spesso rappresentati da un piccolo triangolo o dai segni più e meno. |
| range | Un controllo che mostra l'opzione attuale, eventualmente in modo grafico, e permette all'utente di selezionare altre opzioni, ad esempio trascinando un cursore o ruotando una manopola. |
| signature | Un campo per inserire una firma. |
| password | Un campo per inserire una password. Di solito il testo viene visualizzato come una serie di pallini o riquadri per nasconderne il valore. |
| initial | Fa usare alla proprietà il suo valore predefinito. |
| inherit | Eredita la proprietà dall'elemento genitore. |