Come selezionare la casella di selezione scelta jquery

Question

Sto usando jQuery scelto per la mia casella multi-select. Tuttavia, trovo che gli stili predefiniti nel file chosen.css siano un po 'difficili da sovrascrivere, il che eliminando totalmente chosen.css potrebbe anche non essere una buona opzione.

Ecco il mio violino: https://jsfiddle.net/k1Lr0342/

HTML:

<select class="chosen" multiple="true" style="height: 34px; width: 280px"> 
    <option>Choose...</option> 
    <option>jQuery</option> 
    <option selected="selected">MooTools</option> 
    <option>Prototype</option> 
    <option selected="selected">Dojo Toolkit</option> 
</select> 

css:

.chosen-choices { 
    border-radius: 3px; 
    box-shadow: inset 0px 1px 2px rgba(0,0,0,0.3); 
    border: none; 
    height: 34px !important; 
    cursor: text; 
    margin-top: 12px; 
    padding-left: 15px; 
    border-bottom: 1px solid #ddd; 
    width: 285px; 
    text-indent: 0; 
    margin-left: 30px; 
    } 

ho cercato di scrivere direttamente il css per .chosen-choicesul. Alcuni funzionano come border-radius e box-shadow. Ma altri: margin, height, padding, border, ecc. Vengono sovrascritti dal file chosen.css. Un'opzione è di mettere !important per ogni impostazione che non funziona. Questo funzionerà per la maggior parte degli animali, ma non è ancora all'altezza. qualche idea?

Answer 1

CSS will accept style that uses more specified selector.

.chosen-container-multi .chosen-choices { 
    /*blah blah*/ 
} 

.chosen-choices { 
    /* less specificity, this style might not work */ 
} 

Working fiddle

Answer 2

Se si guarda .chosen-choices in selected.css, si troverà l'altezza è auto!important. Elimina (o commenta) quelli !important e dovrebbe andare bene.

È possibile utilizzare l'ispettore elementi del browser per controllare i css applicati. Personalmente uso sempre gli strumenti di sviluppo di Chrome. Save me un sacco di problemi

Answer 3

Provare a utilizzare jQuery, ecco il lavoro JSFIDDLE

$(".chosen-choices li").css("background","red"); 

Answer 4

po 'tardi, ma ho pensato di rispondere in quanto Mi sono imbattuto in questo. Dato che gli elementi scelti che vedi sono basati sul menu di selezione che nasconde, devi trovare l'elemento nel div immediatamente successivo (creato da scelto) e modificarlo. Puoi farlo con Jquery assumendo che tu sappia che è un valore.

$('.your-select-menu').next().find('.search-choice').each(function() { 
 
    if ($(this).text() === someValue) { 
 
    $(this).css("border-color", "#00b300"); 
 
    } 
 
})

I risultati in questo