Dapatkah Anda menata tag pilih dalam html?

Sudah lama sulit untuk mengatur gaya elemen di semua browser. Serangkaian gaya yang masuk akal, ternyata, dapat membuat kotak pilihan yang konsisten dan menarik di seluruh browser baru sambil tetap baik-baik saja di browser lama juga. Ada beberapa elemen kotak pilih yang dapat diberi gaya, terutama tinggi, lebar, font, batas, warna, bantalan, bayangan kotak, dan warna latar belakang. Judul dokumen. kotak { lebar. 120px; . 30px; . 1px solid #999; . 18px; . #1c87c9; . #eee; . 5px; . 4px 4px #ccc;

Kotak pilih bergaya

Kotak pilih biasa

Kotak pilih bergaya

Namun, panah drop-down yang mengganggu tetap sama. Tidak ada cara langsung untuk menatanya, tetapi ada beberapa trik yang dapat digunakan untuk mengubah panah drop-down default. Mari kita bahas beberapa metode di bawah ini

Untuk menyembunyikan panah default dari dropdown, setel properti tampilan CSS ke nilai "none", lalu tambahkan panah individual Anda dengan bantuan properti steno latar belakang. Perhatikan bahwa properti tampilan masih dianggap sebagai teknologi eksperimental dan Anda perlu menggunakan awalan -moz- (untuk Firefox) dan -webkit- (untuk Chrome, Safari, Opera) untuk kompatibilitas browser maksimum. Judul dokumen pilih { lebar. 140px; . 35px; . 5px 35px 5px 5px; . 18px; . 2px solid #ccc; . tidak ada; . tidak ada; . tidak ada; . url("/upload/media/default/0001/02/f7b4d3d2ba3fe1d8518e6e63d7740e1e73921abf. png") 96% / 15% no-repeat #eee; }

Pertama, letakkan elemen kotak dalam wadah dengan lebar tetap dan atur luapan ke "tersembunyi". Kemudian, beri elemen lebar lebih dari 20 piksel lebih besar dari

elemen. Ini akan membuat panah drop-down default disembunyikan (karena overflow. tersembunyi di wadah), dan sekarang dimungkinkan untuk menerapkan gambar latar belakang di sisi kanan

.

Metode ini bagus untuk digunakan karena semua browser secara efektif mendukung overflow. tersembunyi

Perhatikan bahwa kerugian dari metode ini adalah bahwa opsi secara visual lebih luas daripada menu pilihan

  
    Title of the document
    
  
  
    

      
        
        
        
        
      
    
  

Properti pointer-events CSS dapat digunakan untuk membuat drop-down individual, dengan menghamparkan elemen di atas panah drop-down asli (untuk membuat yang khusus) dan melarang event pointer di atasnya. Metode ini berfungsi dengan baik dan memiliki dukungan browser yang sangat baik. Cukup cantik menggunakan tanda pilihan Anda alih-alih tanda drop-down kotak yang mengganggu

Tetapkan tanda di properti konten dan atur font yang sesuai agar terlihat bagus. Di sini, kami menyetel "Consolas" dan "monospace". Kemudian, Anda perlu memutar tanda baca menggunakan properti transformasi CSS

Di sini, kotak disisipkan dalam sebuah elemen, sehingga kita dapat menyetel kursor untuknya meskipun properti pointer-events disetel ke "none". Judul dokumen pilih { lebar. 140px; . 35px; . 4px; . 4px; . 2px 2px 8px #999; . #eee; . tidak ada; . tidak ada; . inline-blok; . tidak ada; . tidak ada; . tidak ada; . penunjuk; . relatif; . setelah { konten. ''; . 11px "Konsola", ruang tunggal; . #666; . putar (90 derajat); . putar (90 derajat); . putar (90 derajat); . 8px; . 2px; . 0 0 2px; . 1px padat #ddd; . mutlak; . tidak ada; . sebelum { konten. ''; . 6px; . 0px; . 20px; . 20px; . #eee; . mutlak; . tidak ada; . memblokir;

Tag HTML digunakan untuk membuat daftar drop-down opsi, yang muncul saat pengguna mengklik elemen formulir, dan memungkinkan untuk memilih salah satu opsi. Tag

Opsi pertama dari daftar opsi dipilih secara default. Untuk mengubah opsi yang telah ditentukan sebelumnya, atribut yang dipilih digunakan

Tag digunakan untuk mengelompokkan beberapa opsi menjadi satu grup. Isi dari

Tampilan daftar bergantung pada atribut ukuran, yang menentukan tinggi daftar. Lebar daftar tergantung pada panjang teks di dalamnya

Tag sulit ditata secara efektif dengan CSS. Anda dapat memengaruhi bagian tertentu dari suatu elemen. Misalnya, dimungkinkan untuk mengontrol font yang ditampilkan, model kotak, dll. , serta Anda dapat menggunakan properti tampilan untuk menghapus tampilan sistem default. Tetapi properti ini tidak memberikan hasil yang stabil di seluruh browser. Struktur internal tag rumit, dan sulit dikendalikan. Untuk mendapatkan kontrol penuh, Anda mungkin memerlukan pustaka dengan widget formulir penataan gaya yang lebih baik, atau menu tarik-turun menggunakan elemen non-semantik

Bisakah Anda memilih gaya HTML?

Bisakah Anda memilih opsi gaya?