Comment utiliser la propriété d'apparence en CSS3 pour changer l'apparence d'un élément

Cet article présente principalement comment utiliser l'attribut d'apparence en CSS3 pour modifier l'apparence des éléments. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Tout le monde. sait que chaque navigateur affiche les éléments HTML différemment. Par exemple, les boutons ont des effets de rendu différents dans Chrome et FF. De cette façon, nous avons l'idée d'aujourd'hui. En utilisant le style de rendu par défaut du navigateur pour les éléments, nous pouvons utiliser l'attribut d'apparence pour modifier le style de rendu de n'importe quel élément

Il y a quelque temps, dans "Correction du bug du bouton de soumission sur iPhone" Il est introduit pour utiliser "-webkit-apparence: none;" pour changer le style par défaut du bouton sur iPhone. En fait, nous pouvons inverser l'idée et utiliser l'attribut "apparence" pour changer le style par défaut du navigateur de n'importe quel En termes simples, vous pouvez utiliser l'attribut « apparence » pour restituer le « paragraphe p » dans un style de bouton, ou dans une « zone de saisie », une « zone de sélection » et d'autres effets.
Tout le monde sait que chaque navigateur restitue les éléments HTML différemment. Par exemple, "bouton" a des effets de rendu différents dans Chrome et FF. Cela nous amène à l'idée d'aujourd'hui. En utilisant le style de rendu par défaut du navigateur pour les éléments, nous pouvons utiliser l'attribut "apparence" pour modifier le style de rendu de n'importe quel élément. En termes les plus simples, je souhaite définir par défaut le lien "a" affiché dans ". style bouton", nous pouvons alors utiliser "apparence" définie sur "bouton".
La fonction "apparence" semble plutôt intéressante, mais malheureusement, chaque fabricant de navigateur fonctionne actuellement indépendamment et ne peut pas atteindre une norme unifiée. À l'heure actuelle, il n'existe que deux navigateurs principaux disponibles, dont "webkit" et. le second est "ff", ce qui signifie que lorsque vous utilisez "apparences", vous devez ajouter le préfixe de chaque usine de navigateur.
Comment utiliser l'apparence :

.elmClass{   
   -webkit-appearance: value;   
   -moz-appearance:    value;   
   appearance:         value;   
}

Regardons ensuite un exemple simple :

<p class="lookLikeAButton">我是一个段落P元素 </p>  
<p class="lookLikeAListbox">我是一个段落P元素 </p>  
<p class="lookLikeAListitem">我是一个段落P元素 </p>  
<p class="lookLikeASearchfield">我是一个段落P元素 </p>  
<p class="lookLikeATextarea">我是一个段落P元素 </p>  
<p class="lookLikeAMenulist">我是一个段落P元素</p>

Ensuite, utilisez l'attribut « apparence » pour modifier le « P » au-dessus de l'élément style :

/*看起来像个按钮，以按钮的风格渲染*/   
.lookLikeAButton{   
     -webkit-appearance:button;   
     -moz-appearance:button;   
}   
/*看起来像个清单盒子，以listbox风格渲染*/   
.lookLikeAListbox{   
     -webkit-appearance:listbox;   
     -moz-appearance:listbox;   
}   
/*看起来像个清单列表，以listitem风格渲染*/   
.lookLikeAListitem{   
     -webkit-appearance:listitem;   
     -moz-appearance:listitem;   
}   
/*看起来像个搜索框，以searchfield风格渲染*/   
.lookLikeASearchfield{   
     -webkit-appearance:searchfield;   
     -moz-appearance:searchfield;   
}   
/*看起来像个文本域，以textarea风格渲染*/   
.lookLikeATextarea{   
     -webkit-appearance:textarea;   
     -moz-appearance:textarea;   
}   
/*看起来像个下接菜单，以menulist风格渲染*/   
.lookLikeAMenulist{   
     -webkit-appearance:menulist;   
     -moz-appearance:menulist;   
}

Après avoir défini la valeur de l'attribut "apparence", le style par défaut du paragraphe P est modifié, comme le montre la figure :


Bien sûr, les attributs ci-dessus ne sont qu'une partie de "l'apparence". J'ai collecté l'apparence sous webkit et Mozilla pour votre référence :

La valeur de l'attribut d'apparence sous Webkit

checkbox
radio
push-button
square-button
button
button-bevel
listbox
listitem
menulist
menulist-button
menulist-text
menulist-textfield
scrollbarbutton-up
scrollbarbutton-down
scrollbarbutton-left
scrollbarbutton-right
scrollbartrack-horizontal
scrollbartrack-vertical
scrollbarthumb-horizontal
scrollbarthumb-vertical
scrollbargripper-horizontal
scrollbargripper-vertical
slider-horizontal
slider-vertical
sliderthumb-horizontal
sliderthumb-vertical
caret
searchfield
searchfield-decoration
searchfield-results-decoration
searchfield-results-button
searchfield-cancel-button
textfield
textarea

Valeur de l'attribut Apparence sous Mozilla

none
button
checkbox
checkbox-container
checkbox-small
dialog
listbox
menuitem
menulist
menulist-button
menulist-textfield
menupopup
progressbar
radio
radio-container
radio-small
resizer
scrollbar
scrollbarbutton-down
scrollbarbutton-left
scrollbarbutton-right
scrollbarbutton-up
scrollbartrack-horizontal
scrollbartrack-vertical
separator
statusbar
tab
tab-left-edge Obsolete
tabpanels
textfield
textfield-multiline
toolbar
toolbarbutton
toolbox
-moz-mac-unified-toolbar
-moz-win-borderless-glass
-moz-win-browsertabbar-toolbox
-moz-win-communications-toolbox
-moz-win-glass
-moz-win-media-toolbox
tooltip
treeheadercell
treeheadersortarrow
treeitem
treetwisty
treetwistyopen
treeview
window

Si vous êtes intéressé, vous pouvez consulter l'introduction connexe suivante :

1. Mozilla Docs pour -moz-looking

2. Trent Walton sur l'apparence du Webkit

3. Shaun Inman sur la désactivation de l'ombre du texte interne des entrées de texte sur iPad

4. Spécification CSS3

5. Propriété CSS : -webkit-apparence

Enfin dans Let Je vous rappelle que "l'apparence" n'est actuellement pas prise en charge sur les navigateurs de la série IE et Opera, et Safari ne prend en charge que la version 3.0 ou supérieure, mais elle est mieux prise en charge sur les navigateurs Chrome, Firefox et les paramètres mobiles. Si cela vous intéresse, vous pouvez essayer les valeurs d'attribut ci-dessus une par une en privé pour voir quel effet cela apporte à tout le monde.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

À propos de l'utilisation des modifications graphiques de transformation courantes dans CSS3

À propos de l'animation CSS3 pour obtenir des images Effet d'animation par image

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!