Apakah mungkin untuk menata kotak pilih? [Tutup]


145

Saya punya kotak pilih HTML yang perlu saya gaya. Saya lebih suka menggunakan CSS saja tetapi jika harus, saya akan menggunakan jQuery untuk mengisi kekurangan.

Adakah yang bisa merekomendasikan tutorial atau plugin yang bagus?

Saya tahu, Google, tetapi saya sudah mencari selama dua jam terakhir dan saya tidak menemukan apa pun yang memenuhi kebutuhan saya.

Itu harus:

  • Kompatibel dengan jQuery 1.3.2
  • Dapat diakses
  • Rendah hati
  • Benar-benar dapat disesuaikan dalam hal menata setiap aspek dari kotak pilih

Adakah yang tahu sesuatu yang akan memenuhi kebutuhan saya?


6
Anda maksudnya Anda ingin dropdown yang dapat disesuaikan (built in jquery), kan? karena pilih kotak bahkan tidak objek browser (mereka Platform benda), sangat sederhana, sangat mentah, dan Anda tidak bisa bergaya banyak dari itu (Anda tidak bisa gaya perbatasan misalnya)
Ayyash

+1 untuk penjelasan dan pemformatan yang bagus!
Manish

6
Dipilih layak disebutkan tetapi tidak terlalu dapat dikustomisasi dan memiliki banyak masalah terbuka. Bagus untuk dilihat dan digunakan.
kutu buku yang dibayar

1
@Ayyash Apa yang Anda katakan adalah benar untuk MSHTML (Internet Explorer & teman-teman) dan WebCore (Safari) pada beberapa sistem (tentunya Mac OS). Itu tidak benar untuk Gecko (Firefox & teman-teman). Jadi masalah sebenarnya adalah Anda tidak dapat selectmen- style elemen cross-browser. Tetapi jika orang mau hidup dengan perbedaan, Anda dapat menata mereka - termasuk perbatasan.
PointedEars

1
@PointedEras ya, pada 2012 mereka bisa, tapi saya rasa itu 3 tahun yang lalu ketika saya mengatakan apa yang saya katakan, saya cukup yakin saya memberikan suntikan saat itu dan itu tidak berhasil
Ayyash

Jawaban:


45

Saya telah melihat beberapa plugin jQuery di luar sana yang mengonversikan <select>ke <ol>dan <option>ke <li>, sehingga Anda dapat menatanya dengan CSS. Tidak mungkin terlalu sulit untuk menggulung sendiri.

Ini satu: https://gist.github.com/1139558 (Dulu dia di sini , tapi sepertinya situsnya down.)

Gunakan seperti ini:

$('#myselectbox').selectbox();

Gaya seperti ini:

div.selectbox-wrapper ul {
  list-style-type:none;
  margin:0px;
  padding:0px;
}
div.selectbox-wrapper ul li.selected { 
  background-color: #EAF2FB;
}
div.selectbox-wrapper ul li.current { 
  background-color: #CDD8E4;
}
div.selectbox-wrapper ul li {
  list-style-type:none;
  display:block;
  margin:0;
  padding:2px;
  cursor:pointer;
}

Saya mencoba versi ini pada awalnya tetapi DIV tidak diposisikan relatif di mana kotak pilih berada. Sebaliknya ia diposisikan keras ke kiri.

Saya belum pernah menggunakan ini sendiri. Demo ( brainfault.com/demo/selectbox/0.5 ) untuk itu terlihat baik-baik saja. Lihatlah sekeliling untuk implementasi lainnya. Saya tahu saya telah melihat beberapa plugin lain yang melakukan ini.
Mark A. Nicolosi

1
Saya mencoba ini dan itu bekerja sebentar sampai saya harus meletakkan lebih dari satu di halaman. Sekarang sulit untuk merancang karena untuk beberapa alasan bodoh penulis pikir itu OK untuk menggunakan ID yang sama untuk semua elemen daripada ID atau kelas yang unik. Sekarang saya sedang berpikir untuk menulis sendiri ...
Jonathan

19
404 - ada ide di mana ada cermin?
Moak

2
Berhati-hatilah karena sebagian besar plugin menu pilih tidak dapat diakses oleh pembaca layar. Belum menemukan yang berfungsi.
Marcy Sutton

18

Pembaruan: Pada 2013, dua yang saya lihat yang patut diperiksa adalah:

  • Dipilih - banyak barang keren, 7k + pengamat di github. (disebutkan oleh 'kutu buku yang dibayar' di komentar)
  • Select2 - terinspirasi oleh Chosen, bagian dari Angular-UI dengan beberapa penyesuaian bermanfaat pada Chosen.

Ya!


Pada 2012 salah satu solusi paling ringan dan fleksibel yang saya temukan adalah ddSlick . Info yang relevan (diedit) dari situs:

  • Menambahkan gambar dan teks ke select options
  • Dapat menggunakan JSON untuk mengisi opsi
  • Mendukung fungsi panggilan balik pada pemilihan

Dan inilah preview dari berbagai mode:

masukkan deskripsi gambar di sini


14

Sedangkan untuk CSS, Mozilla tampaknya yang paling ramah, terutama dari FF 3.5+. Browser Webkit kebanyakan hanya melakukan hal mereka sendiri, dan mengabaikan gaya apa pun. IE sangat terbatas, meskipun IE8 memungkinkan Anda setidaknya gaya perbatasan warna / lebar.

Berikut ini sebenarnya terlihat cukup bagus di FF 3.5+ (memilih preferensi warna Anda, tentu saja):

select {
    -moz-border-radius: 4px;
    -moz-box-shadow: 1px 1px 5px #cfcfcf inset;
    border: 1px solid #cfcfcf;
    vertical-align: middle;
    background-color: transparent;
}
option {
    background-color: #fef5e6;
    border-bottom: 1px solid #ebdac0;
    border-right: 1px solid #d6bb86;
    border-left: 1px solid #d6bb86;
}
option:hover {
    cursor: pointer;
}

Tetapi ketika datang ke IE, Anda harus menonaktifkan warna latar belakang pada opsi jika Anda tidak ingin itu ditampilkan ketika menu opsi tidak ditarik ke bawah. Dan, seperti yang saya katakan, webkit melakukan hal sendiri.


11

Kami telah menemukan cara sederhana dan layak untuk melakukan ini. Ini lintas-browser, dapat didegradasi, dan tidak memecah posting bentuk. Pertama atur opacity kotak pilih ke 0.

.select { 
    opacity : 0;
    width: 200px;
    height: 15px;
}

<select class='select'>
    <option value='foo'>bar</option>    
</select>

ini agar Anda masih bisa mengkliknya

Kemudian buat div dengan dimensi yang sama dengan kotak pilih. Div harus diletakkan di bawah kotak pilih sebagai latar belakang. Gunakan {position: absolute} dan z-index untuk mencapai ini.

.div {
    width: 200px;
    height: 15px;
    position: absolute;
    z-index: 0;
}

<div class='.div'>{the text of the the current selection updated by javascript}</div>
<select class='select'>
    <option value='foo'>bar</option>    
</select>

Perbarui innerHTML div dengan javascript. Mudah dengan jQuery:

$('.select').click(function(event)) { 
    $('.div').html($('.select option:selected').val());
}

Itu dia! Cukup gaya div Anda, bukan kotak pilih. Saya belum menguji kode di atas sehingga Anda mungkin perlu mengubahnya. Tapi semoga Anda mendapatkan intinya.

Saya pikir solusi ini mengalahkan {-webkit-appearance: none;}. Apa yang harus dilakukan browser paling banyak adalah menentukan interaksi dengan elemen formulir, tetapi jelas bukan bagaimana awalnya ditampilkan pada halaman seperti yang merusak desain situs.


10

Berikut ini sedikit plug jika Anda kebanyakan menginginkannya

  • gila menyesuaikan dengan keadaan tertutup dari selectelemen
  • tetapi pada kondisi terbuka , Anda mendukung pengalaman asli yang lebih baik untuk memilih opsi (roda gulir, tombol panah, fokus tab, modifikasi ajax options, zindex yang tepat, dll.)
  • tidak suka markup yang berantakan uldan lidihasilkan

Maka jquery.yaselect.js bisa lebih cocok . Secara sederhana:

$('select').yaselect();

Dan markup terakhir adalah:

<div class="yaselect-wrap">
  <div class="yaselect-current"><!-- current selection --></div>
</div>
<select class="yaselect-select" size="5">
  <!-- your option tags -->
</select>

Lihat di github.com


itu luar biasa dan bekerja di perangkat seluler juga :)
flying sheep

bekerja di iOS. maaf, saya tidak punya akses ke android dll?
choonkeat

1
itu bukan pertanyaan, itu pujian. itu tidak bekerja dengan baik pada android saya.
domba terbang

5

Anda dapat sedikit banyak menggunakan CSS dengan sendirinya

select {
    background: red;
    border: 2px solid pink;
}

Tapi ini sepenuhnya tergantung pada browser. Beberapa browser keras kepala.

Namun, ini hanya akan membuat Anda sejauh ini, dan itu tidak selalu terlihat sangat bagus. Untuk kontrol penuh, Anda harus mengganti pilihan melalui jQuery dengan widget Anda sendiri yang meniru fungsi kotak pilih. Pastikan bahwa ketika JS dinonaktifkan, kotak pilih yang normal ada di tempatnya. Ini memungkinkan lebih banyak pengguna untuk menggunakan formulir Anda, dan membantu dengan aksesibilitas.




2

Jika punya solusi tanpa jQuery. Tautan di mana Anda dapat melihat contoh yang berfungsi: http://www.letmaier.com/_selectbox/select_general_code.html (ditata dengan lebih banyak css)

Bagian gaya dari solusi saya:

<style>
#container { margin: 10px; padding: 5px; background: #E7E7E7; width: 300px; background: #ededed); }
#ul1 { display: none; list-style-type: none; list-style-position: outside; margin: 0px; padding: 0px; }
#container a {  color: #333333; text-decoration: none; }
#container ul li {  padding: 3px;   padding-left: 0px;  border-bottom: 1px solid #aaa;  font-size: 0.8em; cursor: pointer; }
#container ul li:hover { background: #f5f4f4; }
</style>

Sekarang kode-HTML di dalam tag-tubuh:

<form>
<div id="container" onMouseOver="document.getElementById('ul1').style.display = 'block';" onMouseOut="document.getElementById('ul1').style.display = 'none';">
Select one entry: <input name="entrytext" type="text" disabled readonly>
<ul id="ul1">
    <li onClick="document.forms[0].elements['entrytext'].value='Entry 1'; document.getElementById('ul1').style.display = 'none';"><a href="#">Entry 1</a></li>
    <li onClick="document.forms[0].elements['entrytext'].value='Entry 2'; document.getElementById('ul1').style.display = 'none';"><a href="#">Entry 2</a></li>
    <li onClick="document.forms[0].elements['entrytext'].value='Entry 3'; document.getElementById('ul1').style.display = 'none';"><a href="#">Entry 3</a></li>
</ul>
</div>
</form>

Harap berikan contoh alih-alih hanya menautkan ke satu.
Semua Pekerja Sangat Penting

Saya mengubah jawaban saya seperti yang Anda minta.
Christoph Letmaier

1
Terlihat jauh lebih baik sekarang. BTW, tidak ada yang salah dengan menautkan ke contoh yang berfungsi atau sumber yang menunjukkan contoh (itu bisa sangat membantu). Tetapi tautan yang tidak dapat dihindari menjadi tidak valid seiring waktu sehingga diinginkan untuk selalu memberikan informasi yang diperlukan dalam jawaban itu sendiri (yang Anda berikan) bahkan ketika tautan yang bermanfaat diberikan.
Semua Pekerja Sangat Penting

Oke, mengerti ... :-) Saya akan mencoba yang terbaik untuk menjaga tautan tetap hidup ...
Christoph Letmaier

2

Diperbarui untuk 2014: Anda tidak perlu jQuery untuk ini . Anda dapat sepenuhnya mendisain kotak pilih tanpa jQuery menggunakan StyleSelect . Misalnya, diberikan kotak pilih berikut:

<select class="demo">
  <option value="value1">Label 1</option>
  <option value="value2" selected>Label 2</option>
  <option value="value3">Label 3</option>
</select>

Menjalankan styleSelect('select.demo')akan membuat kotak pilih yang ditata sebagai berikut:

masukkan deskripsi gambar di sini


Catatan, tidak ada dukungan untuk IE9 dan di bawah ini
Ben Sewards

1

Saya membuat plugin jQuery, SelectBoxIt , beberapa hari yang lalu. Itu mencoba untuk meniru perilaku kotak pilih HTML biasa, tetapi juga memungkinkan Anda untuk gaya dan menghidupkan kotak pilih menggunakan jQueryUI. Coba lihat dan beri tahu saya apa yang Anda pikirkan.

http://www.selectboxit.com





-1

Solusi sederhananya adalah Warp kotak pilihan Anda di dalam div, dan beri style div yang sesuai dengan desain Anda. Atur opacity: 0 untuk memilih kotak, itu akan membuat kotak pilih tidak terlihat. Masukkan tag rentang dengan jQuery dan ubah nilainya secara dinamis jika pengguna mengubah nilai turun. Total demonstrasi yang ditunjukkan dalam tutorial ini dengan penjelasan kode. Semoga ini akan menyelesaikan masalah Anda.

Kode JQuery sepertinya mirip dengan ini.

 <script>
   $(document).ready(function(){
     $('.dropdown_menu').each(function(){
       var baseData = $(this).find("select option:selected").html();
       $(this).prepend("<span>" + baseData + "</span>");
     });

     $(".dropdown_menu select").change(function(e){
       var nodeOne = $(this).val();
       var currentNode = $(this).find("option[value='"+ nodeOne +"']").text();
       $(this).parents(".dropdown_menu").find("span").text(currentNode);
     });
   });
</script>
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.