cari
Rumahhujung hadapan webtutorial css如何使用CSS3中appearance属性改变元素的外观

这篇文章主要介绍了关于如何使用CSS3中appearance属性改变元素的外观,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

大家都知道每个浏览器对HTML元素渲染都不一样,比如说button,在chrome和ff中,渲染出来的效果都是不尽相同的。这样一来就有了今天这个思路,利用浏览器的对元素的默认渲染风格,我们可以使用appearance属性对任何元素的渲染风格改变

前段时间在《修复iPhone上submit按钮bug》中介绍了使用“-webkit-appearance: none; ”来改变按钮在iPhone下的默认风格,其实我们可以反过来思路,使用“appearance”属性,来改变任何元素的浏览器默认风格,简单的说,你可以使用“appearance”属性将“段落p”渲染成button的风格,也可以渲染成“输入框”、“选择框”等效果。
大家都知道每个浏览器对HTML元素渲染都不一样,比如说“button”,在chrome和ff中,渲染出来的效果都是不尽相同的。这样一来就有了今天这个思路,利用浏览器的对元素的默认渲染风格,我们可以使用“appearance”属性对任何元素的渲染风格改变,最简单的来说,我要把“a”链接默认显示成“按钮”风格,那么我们可以使用“appearance”设置为“button”。
“appearance”功能听起来蛮大的,不过可惜的是,目前各个浏览器厂商各自为政,还无法达到统一的标准,至今天也只有两个内核的浏览器可以使用,其一是“webkit”,其二是“ff”的,也就是说在使用“appearances”时,需要加上各浏览器厂前缀。
appearance使用方法:

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

接下来我们一起来看个简单的实例:

<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>

接下来,使用“appearance”属性来改变上面“P”元素的风格:

/*看起来像个按钮,以按钮的风格渲染*/   
.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;   
}

经过“appearance”的属性值设置后,段落P的默认风格就被改变了,如图所示:


当然上面的属性只是“appearance”中的一部分,我搜集了一下webkit和Mozilla下的appearance给大家参考:

Webkit下的appearance属性值

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

Mozilla下的appearance属性值

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

大家要是感兴趣的话可以看看下面的相关介绍:

  1. Mozilla Docs for -moz-appearance

  2. Trent Walton on Webkit Appearance

  3. Shaun Inman on Disabling Inner Text Shadow of Text Inputs on iPad

  4. CSS3 Spec

  5. CSS property: -webkit-appearance

最后在提醒大家一回,目前在IE系列和Opera浏览器上不支持“appearance”,而且Safari也只有3.0版本以上支持,而在Chrome和Firefox以及移动设置浏览器上得到较好的支持。如果大家对此感兴趣,自己可以私下一个下个尝试上面的属性值,给大家带来何种效果。

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

关于CSS3中常见transformation图形变化的用法

关于CSS3的animation实现逐帧动画效果

Atas ialah kandungan terperinci 如何使用CSS3中appearance属性改变元素的外观. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Di manakah 'Langgan Podcast' pautan ke?Di manakah 'Langgan Podcast' pautan ke?Apr 16, 2025 pm 12:04 PM

Untuk sementara waktu, iTunes adalah anjing besar dalam podcasting, jadi jika anda mengaitkan "Langgan Podcast" untuk suka:

Kepelbagaian enjin pelayarKepelbagaian enjin pelayarApr 16, 2025 pm 12:02 PM

Kami kehilangan opera ketika mereka pergi Chrome pada tahun 2013. Sama dengan Edge ketika ia juga menjadi Chrome awal tahun ini. Mike Taylor memanggil perubahan ini "menurun

Pertimbangan UX untuk Perkongsian WebPertimbangan UX untuk Perkongsian WebApr 16, 2025 am 11:59 AM

Dari laman web Trashy Clickbait hingga paling banyak penerbitan, butang saham telah lama di mana -mana di seluruh web. Namun ia boleh dikatakan bahawa ini

Berita Platform Mingguan: Apple Menggunakan Komponen Web, Rendering HTML Progresif, Sumber Kritikal SendiriBerita Platform Mingguan: Apple Menggunakan Komponen Web, Rendering HTML Progresif, Sumber Kritikal SendiriApr 16, 2025 am 11:55 AM

Dalam roundup minggu ini, Apple masuk ke dalam komponen web, bagaimana Instagram adalah skrip insta-loading, dan beberapa makanan untuk difikirkan untuk sumber kritikal sendiri.

Pathspec git dan cara menggunakannyaPathspec git dan cara menggunakannyaApr 16, 2025 am 11:53 AM

Apabila saya melihat melalui dokumentasi arahan git, saya perhatikan bahawa banyak daripada mereka mempunyai pilihan untuk. Saya pada mulanya berpendapat bahawa ini hanya

Pemetik warna untuk gambar produkPemetik warna untuk gambar produkApr 16, 2025 am 11:49 AM

Bunyi seperti masalah yang sukar tidak? Kami sering tidak mempunyai tembakan produk dalam beribu -ribu warna, supaya kita dapat membalikkannya. Kami juga tidak

Mod gelap bertukar -tukar dengan reaksi dan temaMod gelap bertukar -tukar dengan reaksi dan temaApr 16, 2025 am 11:46 AM

Saya suka apabila laman web mempunyai pilihan mod gelap. Mod gelap menjadikan laman web lebih mudah bagi saya untuk membaca dan membantu mata saya berasa lebih santai. Banyak laman web, termasuk

Beberapa tangan dengan elemen dialog HTMLBeberapa tangan dengan elemen dialog HTMLApr 16, 2025 am 11:33 AM

Ini saya melihat elemen HTML untuk kali pertama. Saya telah menyedarinya untuk seketika, tetapi Haven ' t mengambilnya untuk putaran lagi. Ia mempunyai cukup keren dan

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Arahan sembang dan cara menggunakannya
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌

Alat panas

Penyesuai Pelayan SAP NetWeaver untuk Eclipse

Penyesuai Pelayan SAP NetWeaver untuk Eclipse

Integrasikan Eclipse dengan pelayan aplikasi SAP NetWeaver.

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.

Muat turun versi mac editor Atom

Muat turun versi mac editor Atom

Editor sumber terbuka yang paling popular

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

Dreamweaver Mac版

Dreamweaver Mac版

Alat pembangunan web visual