Mengapa beberapa kotak pop up (atau kotak "pilih") berwarna biru tetapi yang lain tidak ada di Mac OS X?

Saya cukup baru di Mac OS X dan saya bertanya-tanya mengapa beberapa kotak pop up ini berwarna biru, tetapi yang lain tidak. Misalnya, di satu situs web terlihat seperti ini (lihat kotak "Pilih situs" kecil):

non-blue popup box

Tapi kemudian di situs lain, sepertinya ini (kotak "Tampilkan:"):

blue popup box

Apakah ada nama yang berbeda untuk masing-masing ini? Keduanya terlihat seperti dasar <select> elemen tapi anehnya itu biru di satu situs dan bukan di yang lain.

— Nathan
sumber

Dalam sistem OS X tombol-tombol biru telah dipilih sebelumnya sehingga seseorang dapat menekan tombol kembali pada keyboard dan memilihnya. Di Safari (browser) di web perilaku ini dikendalikan oleh situs yang Anda lihat.

— Richard

@ Richard Oh, jadi jika saya menekan enter saat di Yahoo jawaban, kotak pilih itu akan menjadi aktif? Karena saya tahu bahwa ketika memiliki garis biru (itu juga di Chrome) bahwa jika saya menekan enter akan fokus itu, tapi saya tidak tahu tentang panah kecil berwarna biru.

— Nathan

Nggak. Gaya biru adalah gaya "Aqua" default untuk dropdown, tetapi situs dapat menyesuaikan ini menggunakan CSS, dalam hal ini ia berubah ke gaya lain (setidaknya di Safari). Saya tidak punya waktu untuk menulis jawaban terperinci sekarang!

— jtbandes

@jtbandes Terima kasih atas penjelasannya, dan Anda sepenuhnya benar, mereka menetapkan lebar / tinggi yang menyebabkan hal ini terjadi: dl.dropbox.com/u/25819920/Screenshots/… Tapi hei, setidaknya mereka masih terlihat bagus! Jika Anda mau, posting komentar Anda sebagai jawaban dan saya akan menerimanya.

— Nathan

Jawaban:

Gaya biru adalah gaya "Aqua" default untuk drop down, yang akan Anda lihat di sebagian besar aplikasi. Namun, situs dapat menyesuaikan tampilan dropdown menggunakan CSS, di mana browser seperti Safari dan Chrome beralih dari gaya default ke yang lain yang Anda lihat.

Ini sedikit contohnya di mana Anda dapat melihat perubahan gaya ketika Anda meletakkan mouse Anda pada dropdown.

— jtbandes
sumber

Pada contoh halaman yang direferensikan terlihat halaman yola mengimplementasikan menu drop down kustom mereka sendiri yang kebetulan terlihat seperti menu drop down OS X (tidak memiliki yola login untuk memverifikasi) tetapi saya "cukup yakin" itu tidak elemen Drop down UI asli mencobanya di platform lain yang seharusnya terlihat sama atau mirip dengan yang dilakukannya sekarang.

Sementara di sisi lain halaman jawaban Yahoo menggunakan html umum atau drop-down berbasis standar lainnya yang akan cocok dengan tampilan drop-down default untuk platform yang menjalankan browser. Sekarang coba buka halaman itu di banyak platform dan saksikan perubahannya.

Misalnya, lihat bagaimana jawaban Yahoo terlihat di chrome di Android Yahoo answers android chrome

Jika Anda penasaran di sini adalah a referensi ke beberapa kode java-script yang menghasilkan menu drop down standar yang akan mengadopsi tampilan UI asli berdasarkan platform Sistem Operasi.

— MrDaniel
sumber

Saya mencobanya pada Windows 7 dan itu adalah drop down default. Tapi saya pikir itu sesuai dengan gaya itu ketika situs mencoba untuk menyesuaikannya dengan CSS (seperti komentar di bawah pertanyaan saya katakan). Mereka mungkin menetapkan lebar untuk itu, membuatnya beralih ke versi lain. Saya hanya senang itu tidak berubah ke gaya XP yang saya lihat sebelumnya pada screenshot OSX ketika mereka mencoba memodifikasinya dengan CSS.

— Nathan

Ya saya melihat apa yang terjadi - mereka menetapkan lebar dan tinggi, seperti yang Anda lihat di sini: dl.dropbox.com/u/25819920/Screenshots/…

— Nathan