Görünüm - CSS Hileleri | CSS Almanak 2025

appearanceMülkiyet kullanıcıların işletim sisteminin temasına dayalı bir platform native stilini kullanarak bir öğe görüntülemek için kullanılır.

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

Bu öneksiz olmaya başlıyor, bu harika çünkü buradaki tarayıcılar arası hikaye çok karmaşık.

appearanceMülkiyet iki nedenden biri için kullanılır:

Varsayılan olarak sahip olmayan bir öğeye platforma özgü stil uygulamak için
Platforma özgü stili varsayılan olarak sahip olan bir öğeye kaldırmak için

Örneğin, type=searchWebKit tarayıcılarında a ile girişler varsayılan olarak yuvarlatılmış köşelere sahiptir ve CSS aracılığıyla değiştirebilecekleriniz konusunda çok katıdır. Bu stili istemiyorsanız, görünümü ile tek bir hamlede kaldırabilirsiniz.

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

Veya type = text ile bir girdi alıp sadece bir arama girdisi gibi görünmesini sağlayabilirsiniz:

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

WebKit değerleri

onay kutusu
radyo
butona basınız
kare düğme
buton
düğme eğimi
liste kutusu
listitem
menülist
menülist düğmesi
menülist-metin
menülist-metin alanı
kaydırma çubuğu düğmesi
kaydırma çubuğu düğmesi-aşağı
kaydırma çubuğu düğmesi-sol
kaydırma çubuğu düğmesi-sağ
kaydırma çubuğu-yatay
scrollbartrack-dikey
kaydırma çubuğu-yatay
kaydırma çubuğu-dikey
kaydırma çubuğu-yatay
kaydırma çubuğu-dikey
kaydırıcı-yatay
kaydırıcı dikey
sliderthumb-yatay
sliderthumb-dikey
şapka
Arama alanı
arama alanı dekorasyonu
arama-sonuçları-dekorasyon
searchfield-results-düğmesi
searchfield-cancel-butonu
Metin alanı
metin alanı

Mozilla değerleri

Yok
buton
onay kutusu
onay kutusu kapsayıcı
onay kutusu-küçük
diyalog
liste kutusu
menü seçeneği
menülist
menülist düğmesi
menülist-metin alanı
menupopup
ilerleme çubuğu
radyo
radyo konteyneri
küçük radyo
yeniden boyutlandırıcı
kaydırma çubuğu
kaydırma çubuğu düğmesi-aşağı
kaydırma çubuğu düğmesi-sol
kaydırma çubuğu düğmesi-sağ
kaydırma çubuğu düğmesi
kaydırma çubuğu-yatay
scrollbartrack-dikey
ayırıcı
durum çubuğu
sekme
tab-sol-kenar Eski
sekme panelleri
Metin alanı
textfield-multiline
araç çubuğu
araç çubuğu düğmesi
alet kutusu
-moz-mac-birleştirilmiş-araç çubuğu
-moz-kazan-kenarlıksız-cam
-moz-win-browserertabbar-araç kutusu
-moz-kazan-iletişim-araç kutusu
-moz-kazan-cam
-moz-kazan-medya-araç kutusu
araç ipucu
ağaçkafası
Ağaç kafa
ağaç öğesi
treetwisty
açık
ağaç görünümü
pencere

Kaynaklar

-Moz-görünüm için Mozilla Docs
Webkit Görünümü için Trent Walton
Shaun Inman için iPad'de Metin Girişlerinin İç Metin Gölgesini Devre Dışı Bırakma
CSS3 Özellikleri

Tarayıcı Desteği

Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.