È possibile modellare una casella selezionata? [chiuso]

Ho una casella di selezione HTML che ho bisogno di stile. Preferirei usare solo CSS ma se dovessi usare jQuery per colmare le lacune.

Qualcuno può consigliare un buon tutorial o plugin?

Lo so, Google, ma ho cercato le ultime due ore e non trovo nulla che soddisfi le mie esigenze.

Deve essere:

• Compatibile con jQuery 1.3.2
• Accessibile
• discreto
• Completamente personalizzabile in termini di stile di ogni aspetto di una casella selezionata

Qualcuno sa qualcosa che soddisferà le mie esigenze?

Ho visto alcuni plugin jQuery là fuori che convertono <select>"in <ol>" e <option>"in <li>", in modo che tu possa modellarlo con CSS. Non potrebbe essere troppo difficile farlo da solo.

Eccone uno: https://gist.github.com/1139558 (abituato a lui qui , ma sembra che il sito non sia attivo).

Usalo in questo modo:

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

Lo stile in questo modo:

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

Aggiornamento: A partire dal 2013 i due che ho visto che vale la pena controllare sono:

• Scelto : un sacco di cose interessanti, 7k + watcher su github. (menzionato da "un secchione pagato" nei commenti)
• Select2 - ispirato a Chosen, parte dell'interfaccia utente angolare con un paio di utili modifiche su Chosen.

Si!

A partire dal 2012, una delle soluzioni più leggere e flessibili che ho trovato è ddSlick . Informazioni pertinenti (modificate) dal sito:

• Aggiunge immagini e testo a select options
• Può usare JSON per popolare le opzioni
• Supporta le funzioni di callback sulla selezione

Ed ecco un'anteprima delle varie modalità:

Per quanto riguarda i CSS, Mozilla sembra essere il più amichevole, specialmente da FF 3.5+. I browser Webkit fanno principalmente le loro cose e ignorano qualsiasi stile. IE è molto limitato, sebbene IE8 ti permetta almeno di colorare il colore / la larghezza del bordo.

Quanto segue in realtà sembra abbastanza carino in FF 3.5+ (selezionando le tue preferenze di colore, ovviamente):

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

Ma quando si tratta di IE, è necessario disabilitare il colore di sfondo dell'opzione se non si desidera che venga visualizzato quando il menu delle opzioni non è visualizzato. E, come ho detto, webkit fa le sue cose.

Abbiamo trovato un modo semplice e decente per farlo. È cross-browser, degradabile e non interrompe un post del modulo. Innanzitutto imposta l'opacità della casella di selezione su 0.

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

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

questo è così puoi ancora fare clic su di esso

Quindi crea div con le stesse dimensioni della casella di selezione. Il div dovrebbe trovarsi sotto la casella di selezione come sfondo. Usa {position: absolute} e z-index per raggiungere questo obiettivo.

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

Aggiorna il HTML interno del div con javascript. Easypeasy con jQuery:

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

Questo è tutto! Dai uno stile al tuo div invece che alla casella di selezione. Non ho testato il codice sopra, quindi probabilmente dovrai modificarlo. Ma spero che tu abbia capito.

Penso che questa soluzione batte {-webkit-aspect: none;}. Ciò che i browser dovrebbero fare al massimo è dettare l'interazione con gli elementi del modulo, ma sicuramente non il modo in cui inizialmente vengono visualizzati nella pagina in quanto interrompono la progettazione del sito.

Ecco una piccola spina se vuoi per lo più

• impazzire personalizzando lo stato chiuso di un selectelemento
• ma allo stato aperto , preferisci una migliore esperienza nativa alle opzioni di selezione (rotella di scorrimento, tasti freccia, tab focus, modifiche ajax options, zindex corretto, ecc.)
• non mi piace il markup generato ule disordinatoli

Quindi jquery.yaselect.js potrebbe adattarsi meglio . Semplicemente:

$('select').yaselect();

E il markup finale è:

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

Dai un'occhiata su github.com

Puoi modellare in qualche modo con i CSS da solo

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

Ma questo dipende interamente dal browser. Alcuni browser sono testardi.

Tuttavia, questo ti porterà solo così lontano e non sempre ha un bell'aspetto. Per un controllo completo, dovrai sostituire una selezione tramite jQuery con un tuo widget che emula la funzionalità di una casella di selezione. Assicurarsi che quando JS sia disabilitato, al suo posto sia presente una normale casella di selezione. Ciò consente a più utenti di utilizzare il modulo e aiuta con l'accessibilità.

La maggior parte dei browser non supporta la personalizzazione del tag select tramite CSS. Ma trovo questo javascript che può essere usato per selezionare lo stile tag. Ma come al solito nessun supporto per i browser IE.

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ Ho notato un errore su questo che l'attributo Onchange non funzionerebbe

Ho appena trovato questo che sembra davvero buono.

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

Se hai una soluzione senza jQuery. Un collegamento in cui è possibile vedere un esempio funzionante: http://www.letmaier.com/_selectbox/select_general_code.html (in stile con più css)

La sezione di stile della mia soluzione:

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

Ora il codice HTML all'interno del body-tag:

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

Aggiornato per il 2014: non è necessario jQuery per questo . Puoi personalizzare completamente una casella di selezione senza jQuery utilizzando StyleSelect . Ad esempio, data la seguente casella di selezione:

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

L'esecuzione styleSelect('select.demo')creerebbe una casella di selezione con stile come segue:

Ho creato il plugin jQuery, SelectBoxIt , un paio di giorni fa. Cerca di imitare il comportamento di una normale casella di selezione HTML, ma ti consente anche di modellare e animare la casella di selezione utilizzando jQueryUI. Dai un'occhiata e fammi sapere cosa ne pensi.

http://www.selectboxit.com

Dovresti provare ad usare alcuni plugin jQuery come ikSelect .

Ho provato a renderlo molto personalizzabile ma facile da usare.

http://github.com/Igor10k/ikSelect

Sembra vecchio ma qui un plugin molto interessante - http://uniformjs.com

questo sugli usi i twitter-bootstrapstili di trasformare selectin dropdownmenù https://github.com/silviomoreto/bootstrap-select

La soluzione semplice è deformare la casella selezionata all'interno di un div e modellare il div in base al proprio design. Imposta l'opacità: 0 per selezionare la casella, renderà invisibile la casella di selezione. Inserire un tag span con jQuery e modificarne il valore in modo dinamico se l'utente cambia il valore a discesa. Dimostrazione totale mostrata in questo tutorial con spiegazione del codice. Spero che risolva il tuo problema.

Il codice JQuery sembra simile a questo.

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