jQuery 如何设置jquery选择的选择框的样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34916640/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to style jquery chosen select box
提问by Lance Shi
I am using jQuerychosen for my multi-selectbox. However, I do find the styles pre-defined in chosen.cssfile is kind of hard to overwrite, which totally getting rid of chosen.cssmight also not be a very good option.
我正在jQuery为我的multi-select盒子使用选择。但是，我确实发现chosen.css文件中预定义的样式有点难以覆盖，完全摆脱它chosen.css也可能不是一个很好的选择。
Here is my fiddle: https://jsfiddle.net/k1Lr0342/
这是我的小提琴：https: //jsfiddle.net/k1Lr0342/
HTML:
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:
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;
}
I tried to directly write the css for .chosen-choicesul. Some works like border-radiusand box-shadow. But others: margin, height, padding, border, etc. get overwritten by chosen.cssfile. One option is to put !importantfor every setting which doesn't work. This will work for most stuffs but still not the height. Any thoughts?
我试图直接为 .css 编写 css .chosen-choicesul。有些作品像border-radius和box-shadow。但其他人：margin, height, padding, border等被chosen.css文件覆盖。一种选择是!important针对每个不起作用的设置。这适用于大多数东西，但仍然不适用于高度。有什么想法吗？
采纳答案by blurfx
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 */
}
回答by Shoeb Mirza
回答by Bryan
Little late but I thought I'd answer since I ran into this. Since the chosen items you see are based on the select menu it hides, you have to find the element in the div immediately following it (created by chosen) and style it. You can do this with Jquery assuming you know it's value.
有点晚了，但我想我会回答，因为我遇到了这个。由于您看到的所选项目基于它隐藏的选择菜单，因此您必须在紧随其后的 div 中找到该元素（由 selected 创建）并为其设置样式。假设您知道它的价值，您可以使用 Jquery 执行此操作。
$('.your-select-menu').next().find('.search-choice').each(function() {
if ($(this).text() === someValue) {
$(this).css("border-color", "#00b300");
}
}) Results in this 
结果在这
回答by Joshua H
If you look at .chosen-choicesin chosen.css, you will find the height is auto!important. Delete (or comment) those !importantand that should be fine.
如果你.chosen-choices在 selected.css 中查看，你会发现高度是auto!important。删除（或评论）那些!important应该没问题的。
You can use your browser's element inspector to check the applied css. I personally use Chrome developer tools every time. Save me alot of hassle
您可以使用浏览器的元素检查器来检查应用的 css。我个人每次都使用 Chrome 开发者工具。为我省去很多麻烦
