如何風格jQuery的選擇框

我使用jQuery選擇爲我的multi-select框。不過，我發現chosen.css文件中預先定義的樣式有點難以覆蓋，完全擺脫chosen.css也可能不是一個很好的選擇。如何風格jQuery的選擇框

這裏是我的小提琴： 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; 
    }

我試着直接寫CSS的.chosen-choicesul。有些作品喜歡border-radius和box-shadow。但其他人：margin, height, padding, border等被chosen.css文件覆蓋。一種選擇是將!important用於每個不起作用的設置。這將適用於大多數東西，但仍然不是高度。有什麼想法嗎？

來源

2016-01-21 Lance Shi

我想你應該包括以下chosen.css您新的CSS將解決您的問題。你嘗試過嗎？ – ketan

@ketan我試過了。它似乎沒有工作，雖然 –

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

來源

2016-01-21 06:32:27 Mystika

如果您在chosen.css中查看.chosen-choices，您會發現高度爲auto!important。刪除（或評論）那些!important，那應該沒問題。

您可以使用瀏覽器的元素檢查器來檢查應用的CSS。我個人每次都使用Chrome開發者工具。救救我很多麻煩

來源

2016-01-21 06:29:45

事情是我不想修改chosen.css –

嘗試使用jQuery，這裏是工作JSFIDDLE

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

來源

2016-01-21 06:37:28

小晚，但我想，既然我要回答我遇到了這個。由於您看到的所選項目是基於它隱藏的選擇菜單，因此您必須在緊隨其後的div（通過選擇創建）中找到該元素並對其進行設置。假如你知道它的價值，你可以用Jquery來做到這一點。

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

結果在這個

來源

2017-01-23 22:45:56 Bryan

如何風格jQuery的選擇框

回答

相關問題