Aspetto - Trucchi CSS | CSS Almanac 2025

La appearanceproprietà viene utilizzata per visualizzare un elemento utilizzando uno stile nativo della piattaforma basato sul tema del sistema operativo dell'utente.

.thing ( -webkit-appearance: value; -moz-appearance: value; appearance: value; )

Questo sta iniziando a non essere risolto, il che è fantastico perché la storia cross-browser qui è molto complicata.

La appearanceproprietà viene utilizzata per uno dei due motivi:

Per applicare uno stile specifico della piattaforma a un elemento che non lo dispone per impostazione predefinita
Per rimuovere lo stile specifico della piattaforma a un elemento che lo ha per impostazione predefinita

Ad esempio, gli input con un type=searchnei browser WebKit per impostazione predefinita hanno angoli arrotondati e sono molto rigidi in ciò che è possibile modificare tramite CSS. Se non vuoi quello stile, puoi rimuoverlo in un colpo solo con l'aspetto.

input(type=search) ( -webkit-appearance: none; )

Oppure puoi prendere un input con type = text e farlo sembrare un input di ricerca:

input(type=text) ( -webkit-appearance: searchfield; )

Valori di WebKit

casella di controllo
Radio
premi il bottone
pulsante quadrato
pulsante
pulsante-smussatura
listbox
listitem
menulista
pulsante menulista
testo-menulista
menulist-textfield
pulsante della barra di scorrimento
pulsante della barra di scorrimento
scrollbarbutton-left
scrollbarbutton-right
scrollbartrack-horizontal
scrollbartrack-vertical
scrollbarthumb-horizontal
scrollbarthumb-vertical
scrollbargripper-horizontal
scrollbargripper-vertical
cursore orizzontale
cursore verticale
sliderthumb-horizontal
sliderthumb-vertical
caret
campo di ricerca
searchfield-decoration
searchfield-results-decoration
pulsante-risultati-campo di ricerca
searchfield-cancel-button
campo di testo
textarea

Valori di Mozilla

nessuna
pulsante
casella di controllo
checkbox-container
checkbox-small
dialogo
listbox
elemento del menu
menulista
pulsante menulista
menulist-textfield
menupopup
barra di avanzamento
Radio
contenitore radio
radio-piccola
resizer
barra di scorrimento
pulsante della barra di scorrimento
scrollbarbutton-left
scrollbarbutton-right
pulsante della barra di scorrimento
scrollbartrack-horizontal
scrollbartrack-vertical
separatore
barra di stato
tab
tab-left-edge Obsoleto
tabpanels
campo di testo
textfield-multiline
barra degli strumenti
pulsante della barra degli strumenti
cassetta degli attrezzi
-moz-mac-unified-toolbar
-moz-win-borderless-glass
-moz-win-browsertabbar-toolbox
-moz-win-communication-toolbox
-moz-win-glass
-moz-win-media-toolbox
tooltip
treeheadercell
treeheadersortarrow
treeitem
treetwisty
treetwistyopen
visualizzazione ad albero
finestra

Risorse

Mozilla Docs per l'aspetto di -moz
Trent Walton su Webkit Aspetto
Shaun Inman sulla disabilitazione dell'ombreggiatura del testo interno degli input di testo su iPad
Specifiche CSS3

Supporto browser

Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.