Apakah mungkin untuk menata kotak pilih? [Tutup]

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?

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

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:

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.

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.

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

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.

Sebagian besar browser tidak mendukung penyesuaian tag pilih menggunakan css. Tapi saya menemukan javascript ini yang dapat digunakan untuk memilih tag gaya. Namun seperti biasa tidak ada dukungan untuk browser IE.

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ Saya melihat ada kesalahan pada hal ini bahwa atribut Onchange tidak berfungsi.

Saya baru saja menemukan ini yang tampaknya sangat bagus.

http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/

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>

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:

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

Anda harus mencoba menggunakan beberapa plugin jQuery seperti ikSelect .

Saya mencoba membuatnya sangat dapat disesuaikan tetapi mudah digunakan.

http://github.com/Igor10k/ikSelect

Ini sepertinya sudah tua tapi di sini plugin yang sangat menarik - http://uniformjs.com

ini pada penggunaan yang twitter-bootstrapgaya untuk mengubah selectdidropdown menu https://github.com/silviomoreto/bootstrap-select

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>