/ Code Css -webkit-appearance | Résultat du code Css -webkit-appearance | Copie d'écran / J'ai vu une erreur dans cette page

Exemple de code de la propriété CSS -webkit-appearance.

<style>
.exemple div{width:100px; height:40px}
.exemple{margin : 10px 0; border:1px solid #666}
.exemple div.apparenceconteneur{ border:1px dotted #666; background:#ddd
.exemple-webkit-appearance-none { -webkit-appearance : none },
.exemple-webkit-appearance-default-button { -webkit-appearance : default-button }
.exemple-webkit-appearance-checkbox { -webkit-appearance : checkbox }
.exemple-webkit-appearancebutton- { -webkit-appearance : button }
.exemple-webkit-appearance-button-bevel { -webkit-appearance : button-bevel }
.exemple-webkit-appearance-caret { -webkit-appearance : caret }
.exemple-webkit-appearance-listbox { -webkit-appearance : listbox }
.exemple-webkit-appearance-listitem { -webkit-appearance : listitem }
.exemple-webkit-appearance-media-fullscreen-button { -webkit-appearance : media-fullscreen-button } 
.exemple-webkit-appearance-media-mute-button { -webkit-appearance : media-mute-button }
.exemple-webkit-appearance-media-play-button { -webkit-appearance : media-play-button }
.exemple-webkit-appearance-media-seek-back-button { -webkit-appearance : media-seek-back-button } 
.exemple-webkit-appearance-media-seek-forward-button { -webkit-appearance : media-seek-forward-button }
.exemple-webkit-appearance-media-slider { -webkit-appearance : media-slider }
.exemple-webkit-appearance-media-sliderthumb { -webkit-appearance : media-sliderthumb }
.exemple-webkit-appearance-menulist { -webkit-appearance : menulist }
.exemple-webkit-appearance-menulist-button { -webkit-appearance : menulist-button }
.exemple-webkit-appearance-menulist-text { -webkit-appearance : menulist-text }
.exemple-webkit-appearance-menulist-textfield { -webkit-appearance : menulist-textfield }
.exemple-webkit-appearance-push-button { -webkit-appearance : push-button }
.exemple-webkit-appearance-radio { -webkit-appearance : radio }
.exemple-webkit-appearance-searchfield { -webkit-appearance : searchfield }
.exemple-webkit-appearance-searchfield-cancel-button { -webkit-appearance : searchfield-cancel-button }
.exemple-webkit-appearance-searchfield-decoration { -webkit-appearance : searchfield-decoration }
.exemple-webkit-appearance-searchfield-results-button { -webkit-appearance : searchfield-results-button }
.exemple-webkit-appearance-searchfield-results-decoration { -webkit-appearance : searchfield-results-decoration }
.exemple-webkit-appearance-slider-horizontal { -webkit-appearance : slider-horizontal }
.exemple-webkit-appearance-slider-vertical { -webkit-appearance : slider-vertical }
.exemple-webkit-appearance-sliderthumb-horizontal { -webkit-appearance : sliderthumb-horizontal }
.exemple-webkit-appearance-sliderthumb-vertical { -webkit-appearance : sliderthumb-vertical }
.exemple-webkit-appearance-square-button { -webkit-appearance : square-button }
.exemple-webkit-appearance-textarea { -webkit-appearance : textarea }
.exemple-webkit-appearance-textfield { -webkit-appearance : textfield } 
</style>

<div class="exemple"> -webkit-appearance : none <div class="exemple-webkit-appearance-none"></div></div>
<div class="exemple"> -webkit-appearance : default-button <div class="exemple-webkit-appearance-default-button"></div></div>
<div class="exemple"> -webkit-appearance : checkbox <div class="exemple-webkit-appearance-checkbox"></div></div>
<div class="exemple"> -webkit-appearance : button <div class="exemple-webkit-appearance-button"></div></div>
<div class="exemple"> -webkit-appearance : button-bevel <div class="exemple-webkit-appearance-button-bevel"></div></div>
<div class="exemple"> -webkit-appearance : caret <div class="exemple-webkit-appearance-caret"></div></div>
<div class="exemple"> -webkit-appearance : listbox <div class="exemple-webkit-appearance-listbox"></div></div>
<div class="exemple"> -webkit-appearance : listitem <div class="exemple-webkit-appearance-listitem"></div></div>
<div class="exemple"> -webkit-appearance : media-fullscreen-button <div class="exemple-webkit-appearance-media-fullscreen-button"></div></div> 
<div class="exemple"> -webkit-appearance : media-mute-button <div class="exemple-webkit-appearance-media-mute-button"></div></div>
<div class="exemple"> -webkit-appearance : media-play-button <div class="exemple-webkit-appearance-media-play-button"></div></div>
<div class="exemple"> -webkit-appearance : media-seek-back-button <div class="exemple-webkit-appearance-media-seek-back-button"></div></div> 
<div class="exemple"> -webkit-appearance : media-seek-forward-button <div class="exemple-webkit-appearance-media-seek-forward-button"></div></div>
<div class="exemple"> -webkit-appearance : media-slider <div class="exemple-webkit-appearance-media-slider"></div></div>
<div class="exemple"> -webkit-appearance : media-sliderthumb <div class="exemple-webkit-appearance-media-sliderthumb"></div></div>
<div class="exemple"> -webkit-appearance : menulist <div class="exemple-webkit-appearance-menulist"></div></div>
<div class="exemple"> -webkit-appearance : menulist-button <div class="exemple-webkit-appearance-menulist-button"></div></div>
<div class="exemple"> -webkit-appearance : menulist-text <div class="exemple-webkit-appearance-menulist-text"></div></div>
<div class="exemple"> -webkit-appearance : menulist-textfield <div class="exemple-webkit-appearance-menulist-textfield"></div></div>
<div class="exemple"> -webkit-appearance : push-button <div class="exemple-webkit-appearance-push-button"></div></div>
<div class="exemple"> -webkit-appearance : radio <div class="exemple-webkit-appearance-radio"></div></div>
<div class="exemple"> -webkit-appearance : searchfield <div class="exemple-webkit-appearance-searchfield"></div></div>
<div class="exemple"> -webkit-appearance : searchfield-cancel-button <div class="exemple-webkit-appearance-searchfield-cancel-button"></div></div>
<div class="exemple"> -webkit-appearance : searchfield-decoration <div class="exemple-webkit-appearance-searchfield-decoration"></div></div>
<div class="exemple"> -webkit-appearance : searchfield-results-button <div class="exemple-webkit-appearance-searchfield-results-button"></div></div>
<div class="exemple"> -webkit-appearance : searchfield-results-decoration <div class="exemple-webkit-appearance-searchfield-results-decoration"></div></div>
<div class="exemple"> -webkit-appearance : slider-horizontal <div class="exemple-webkit-appearance-slider-horizontal"></div></div>
<div class="exemple"> -webkit-appearance : slider-vertical <div class="exemple-webkit-appearance-slider-vertical"></div></div>
<div class="exemple"> -webkit-appearance : sliderthumb-horizontal <div class="exemple-webkit-appearance-sliderthumb-horizontal"></div></div>
<div class="exemple"> -webkit-appearance : sliderthumb-vertical <div class="exemple-webkit-appearance-sliderthumb-vertical"></div></div>
<div class="exemple"> -webkit-appearance : square-button <div class="exemple-webkit-appearance-square-button"></div></div>
<div class="exemple"> -webkit-appearance : textarea <div class="exemple-webkit-appearance-textarea"></div></div>
<div class="exemple"> -webkit-appearance : textfield <div class="exemple-webkit-appearance-textfield"></div></div>

Interprétation du code de la propriété -webkit-appearance CSS par votre navigateur.

-webkit-appearance : none
-webkit-appearance : default-button
-webkit-appearance : checkbox
-webkit-appearance : button
-webkit-appearance : button-bevel
-webkit-appearance : caret
-webkit-appearance : listbox
-webkit-appearance : listitem
-webkit-appearance : media-fullscreen-button
-webkit-appearance : media-mute-button
-webkit-appearance : media-play-button
-webkit-appearance : media-seek-back-button
-webkit-appearance : media-seek-forward-button
-webkit-appearance : media-slider
-webkit-appearance : media-sliderthumb
-webkit-appearance : menulist
-webkit-appearance : menulist-button
-webkit-appearance : menulist-text
-webkit-appearance : menulist-textfield
-webkit-appearance : push-button
-webkit-appearance : radio
-webkit-appearance : searchfield
-webkit-appearance : searchfield-cancel-button
-webkit-appearance : searchfield-decoration
-webkit-appearance : searchfield-results-button
-webkit-appearance : searchfield-results-decoration
-webkit-appearance : slider-horizontal
-webkit-appearance : slider-vertical
-webkit-appearance : sliderthumb-horizontal
-webkit-appearance : sliderthumb-vertical
-webkit-appearance : square-button
-webkit-appearance : textarea
-webkit-appearance : textfield

Interprétation normale du code de la propriété CSS -webkit-appearance (copie d'écran).

copie d'écran de l'affichage de la propriété CSS -webkit-appearance