Seçim kutusunu biçimlendirmek mümkün mü? [kapalı]

Stil vermem gereken bir HTML seçim kutusu var. Ben sadece CSS kullanmayı tercih ederim ama eğer gerekirse ben boşlukları doldurmak için jQuery kullanacağım.

Herkes iyi bir eğitim veya eklenti önerebilir mi?

Biliyorum, Google, ama son iki saattir araştırıyorum ve ihtiyaçlarımı karşılayacak hiçbir şey bulamıyorum.

Bunun olması gerekir:

• JQuery 1.3.2 ile uyumlu
• ulaşılabilir
• mütevazi
• Seçme kutusunun her yönünü şekillendirme açısından tamamen özelleştirilebilir

İhtiyaçlarımı karşılayacak bir şey bilen var mı?

Orada <select>'s <ol>' ve <option>'s ' dönüştürmek bazı jQuery eklentileri gördüm <li>, böylece CSS ile stil olabilir. Kendinizi almak çok zor olamazdı.

İşte bir tane: https://gist.github.com/1139558 ( Burada kullanılır , ancak site kapalı gibi görünüyor.)

Şöyle kullanın:

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

Şöyle stil verin:

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

Güncelleme: 2013 yılı itibariyle kontrol etmeye değer gördüğüm ikisi:

• Seçilmiş - github üzerinde bir sürü güzel şeyler, 7k + gözlemci. (yorumlarda 'ücretli inek' ile belirtilmiştir)
• Select2 - Chosen'den esinlenerek, birkaç kullanışlı ince ayar ile Angular-UI'nin bir parçası.

Evet!

2012 itibariyle bulduğum en hafif ve esnek çözümlerden biri ddSlick . Siteden alakalı (düzenlenmiş) bilgiler:

• Ekrana resim ve metin ekler select options
• Seçenekleri doldurmak için JSON'u kullanabilir
• Seçimde geri arama işlevlerini destekler

Ve işte çeşitli modların bir önizlemesi:

CSS'ye gelince, Mozilla özellikle FF 3.5+'den en dost gibi görünüyor. Webkit tarayıcıları çoğunlukla kendi şeylerini yapar ve herhangi bir stili görmezden gelir. IE çok sınırlıdır, ancak IE8 en azından kenarlık rengini / genişliğini şekillendirmenize izin verir.

Aşağıdakiler aslında FF 3.5+'de oldukça güzel görünüyor (elbette renk tercihinizi seçmek):

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

Ancak IE söz konusu olduğunda, seçenek menüsü aşağı çekilmediğinde görüntülenmesini istemiyorsanız, seçenekte arka plan rengini devre dışı bırakmanız gerekir. Ve dediğim gibi, webkit kendi işini yapıyor.

Bunu yapmanın basit ve iyi bir yolunu bulduk. Çapraz tarayıcı, parçalanabilir ve form gönderisini bozmaz. Önce seçim kutusunun opaklığını 0 olarak ayarlayın.

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

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

bu hala üzerine tıklayabilirsiniz

Ardından seçim kutusuyla aynı boyutlara sahip div yapın. Div, arka plan olarak seçim kutusunun altına yerleştirilmelidir. Bunu başarmak için {position: mutlak} ve z-endeksini kullanın.

.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>

Div'ın innerHTML'sini javascript ile güncelleyin. JQuery ile kolay kullanım:

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

Bu kadar! Seçim kutusu yerine div stilinizi oluşturun. Yukarıdaki kodu test etmedim, bu yüzden muhtemelen ayarlamanız gerekiyor. Ama umarım özü alırsın.

Bence bu çözüm {-webkit-view: none;} 'ı geçiyor. Tarayıcıların en çok yapması gereken, form öğeleriyle etkileşime girmektir, ancak kesinlikle site tasarımını bozduğu için sayfalarda nasıl göründüklerini değil.

Eğer çoğunlukla istiyorsanız küçük bir fiş

• çılgın Özelleştirme gitmek kapalı durumu aselect öğenin
• ancak açık durumda , toplama seçeneklerinde (kaydırma tekerleği, ok tuşları, sekme odağı, ajax değişiklikleri) daha iyi bir yerel deneyim tercih edersinizoptions , uygun zindex vb.) edersiniz.
• dağınık ul, lioluşturulan işaretlemeleri sevmemek

O zaman jquery.yaselect.js daha uygun olabilir . basitçe:

$('select').yaselect();

Ve son işaretleme:

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

Bunu github.com'da kontrol edin

Kendi başına CSS ile bir dereceye kadar stil yapabilirsiniz

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

Ancak bu tamamen tarayıcıya bağlıdır. Bazı tarayıcılar inatçıdır.

Ancak, bu sadece sizi şimdiye kadar alacak ve her zaman çok iyi görünmüyor. Tam kontrol için, bir seçimi jQuery ile bir seçim kutusunun işlevselliğini taklit eden kendi widget'ınızla değiştirmeniz gerekir. JS devre dışı bırakıldığında, yerine normal bir seçim kutusunun yerleştirildiğinden emin olun. Bu, daha fazla kullanıcının formunuzu kullanmasına olanak tanır ve erişilebilirliğe yardımcı olur.

Tarayıcıların çoğu css kullanarak seçme etiketinin özelleştirilmesini desteklemez. Ama ben seçim etiketi stil için kullanılabilecek bu javascript bulmak. Ancak her zamanki gibi IE tarayıcıları için destek yoktur.

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ Bu konuda Onchange özniteliğinin çalışmadığı bir hata fark ettim

Sadece gerçekten iyi görünen bunu buldum.

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

JQuery olmadan bir çözüm varsa. Çalışan bir örnek görebileceğiniz bir bağlantı: http://www.letmaier.com/_selectbox/select_general_code.html (daha fazla css ile biçimlendirilmiş)

Çözümümün stil bölümü:

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

Şimdi body-tag içindeki HTML kodu:

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

2014 için güncellendi: Bunun için jQuery gerekmez . StyleSelect'i kullanarak bir seçim kutusunu jQuery olmadan tamamen biçimlendirebilirsiniz . Örneğin, aşağıdaki seçim kutusu verildiğinde:

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

Çalıştırılması styleSelect('select.demo'), aşağıdaki gibi tarzlı bir seçim kutusu oluşturur:

Birkaç gün önce jQuery eklentisi SelectBoxIt'i oluşturdum . Normal bir HTML seçim kutusunun davranışını taklit etmeye çalışır, ancak jQueryUI kullanarak seçim kutusunu stilleştirmenize ve canlandırmanıza izin verir. Bir göz atın ve ne düşündüğünüzü bana bildirin.

http://www.selectboxit.com

İkSelect gibi bazı jQuery eklentilerini kullanmayı denemelisiniz .

Çok özelleştirilebilir ama kullanımı kolay hale getirmeye çalıştım.

http://github.com/Igor10k/ikSelect

Bu eski görünüyor ama burada çok ilginç bir eklenti - http://uniformjs.com

kullanımlara bu twitter-bootstrapstiller açmak için selectde dropdownmenüden https://github.com/silviomoreto/bootstrap-select

Basit çözüm, seçim kutunuzu div içinde çözgü yapın ve div tasarımınıza uygun şekilde şekillendirin. Opaklığı ayarla: 0 kutuyu seçmek için, seçim kutusunu görünmez yapar. JQuery ile bir span etiketi ekleyin ve kullanıcı açılır değeri değiştirirse değerini dinamik olarak değiştirin. Bu öğreticide kod açıklamasıyla birlikte gösterilen toplam gösterim . Sorununuzu çözeceğini umuyoruz.

JQuery Kodu buna benzer.

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