如何样式化jquery选择的选择框

Posted 2023-05-07

【中文标题】如何样式化jquery选择的选择框

【英文标题】：How to style jquery chosen select box

【发布时间】：2016-04-27 06:41:12

【问题描述】：

我正在使用为我的multi-select 框选择的jQuery。但是，我确实发现 chosen.css 文件中预定义的样式有点难以覆盖，完全摆脱 chosen.css 也可能不是一个很好的选择。

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

我尝试直接为.chosen-choices ul 编写css。有些作品像border-radius 和box-shadow。但其他人：margin, height, padding, border 等会被chosen.css 文件覆盖。一种选择是为每个不起作用的设置添加!important。这适用于大多数东西，但仍然不适用于高度。有什么想法吗？

【问题讨论】：

我认为您应该在 selected.css 下面包含您的新 css 将解决您的问题。你试过吗？

@ketan 我试过了。不过好像没用

【参考方案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

【讨论】：

您可以通过简单地重复类选择器来增加特异性，如下所示：.chosen-choices.chosen-choices

【参考方案2】：

尝试使用 jQuery，这是有效的JSFIDDLE

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

【参考方案3】：

有点晚了，但我想我会回答的，因为我遇到了这个问题。由于您看到的所选项目是基于它隐藏的选择菜单，因此您必须在紧随其后的 div 中找到元素（由 selected 创建）并为其设置样式。假设你知道它的价值，你可以用 Jquery 做到这一点。

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

结果在这个

【参考方案4】：

我不得不使用：

$(".chzn-results li").css("width", "100%");

不知道是不是因为我的版本太旧了还是什么。

【参考方案5】：

如果你查看 selected.css 中的.chosen-choices，你会发现高度是auto!important。删除（或评论）那些​​!important 应该没问题。

您可以使用浏览器的元素检查器来检查应用的 css。我个人每次都使用 Chrome 开发者工具。省去很多麻烦

【讨论】：

问题是我不想修改 selected.css