将 Chosen.js CSS 更改为 JQuery

Question

首先，我很抱歉没有包含代码，但我不确定要包含哪些内容，因为我使用的是 chosen.js 插件。我运行遇到的问题是我想使用 jquery 更改 chosen.js select 元素的 css。我可以更改 chosen.css 文件中的 css，但无法使用 jquery 更改它。下面的代码适用于普通输入 type=text 但不适用于我的任何 chosen.js 下拉菜单。下面是我正在使用的一些代码片段：

html:

<select class="chosen frm-field" id="program" name="program">
    <option selected="selected" value="0"></option>
    <option value="1">Adult</option>
    <option value="2">Dislocated Worker</option>
    <option value="3">In-School Youth</option>
    <option value="4">Out-of-School Youth</option>
</select>

jquery:

function showErrors() {
    $('#program').css({
    '-webkit-box-shadow': "0px 0px 2px 2px rgba(255,0,0,1)",
    '-moz-box-shadow': "0px 0px 2px 2px rgba(255,0,0,1)",
    'box-shadow': "0px 0px 2px 2px rgba(255,0,0,1)"});
}

尝试添加 Chosen js .trigger 但还是不行：

$('#program').css({
    '-webkit-box-shadow': "0px 0px 2px 2px rgba(255,0,0,1)",
    '-moz-box-shadow': "0px 0px 2px 2px rgba(255,0,0,1)",
    'box-shadow': "0px 0px 2px 2px rgba(255,0,0,1)"}).trigger("chosen:updated");

来自 Chrome 检查的渲染代码：

<select class="chosen frm-field error" id="program" name="program" style="display: none;">
   <option selected="selected" value="0"></option>
   <option value="1">Adult</option>
   <option value="2">Dislocated Worker</option>
   <option value="3">In-School Youth</option>
   <option value="4">Out-of-School Youth</option>
</select>
<div class="chosen-container chosen-container-single chosen-container-single-nosearch" style="width: 100%;" title="" id="program_chosen">
   <a class="chosen-single chosen-default">
      <span>Select One</span>
      <div>
         <b></b>
      </div>
   </a>
   <div class="chosen-drop">
      <div class="chosen-search">
         <input type="text" autocomplete="off" readonly="">
      </div>
      <ul class="chosen-results">
         <li class="active-result" data-option-array-index="1">Adult</li>
         <li class="active-result" data-option-array-index="2">Dislocated Worker</li>
         <li class="active-result" data-option-array-index="3">In-School Youth</li>
         <li class="active-result" data-option-array-index="4">Out-of-School Youth</li>
      </ul>
   </div>
</div>

将 id 从 html 编写的 select 更改为 chosen.js 创建的 div 并且阴影显示但不正确。

新jquery代码：

$('#program_chosen').addClass('error');

使用此代码的阴影图像：

奇怪的是，如果我将边框阴影直接添加到 css 文件中的 .chosen-container-single 和 .chosen-single，那么边框会按照我的预期显示。不幸的是，我只希望在用户提交表单但没有选项 selected 时发生这种情况。下面的图片显示了当前的行为：

意识到这一点后，我还发现通过 jquery 将 addClass .error 应用于 .chosen-container-single & .chosen-single 是可行的，并且它按预期工作。它将所需的阴影应用于所有 select。我试过了 #program_chosen.chosen-container-single #program_chosen.chosen-single 但没有任何反应...

我觉得我很接近，但我错过了最后的联系。欢迎任何想法！提前致谢！

-- 可悲的是，我几乎整天都在研究这个问题，发现这是一个简单的问题。感谢 Steve 通过使用 addClass 而不是一遍又一遍地编写 box-shading 来帮助我清理我的代码...这是我的新错误。问题是 chosen.js 创建的 div 的高度大于它包含的 space 的高度。我所要做的就是在 chosen.css 文件中设置高度，神奇的是 box-shading 非常适合。这通过关闭其他一些东西，但它们只是通过调整一些边距来修复。尽管这很愚蠢，但我希望它能帮助其他人避免将来头痛。

Answer 1

我建议使用 class 来控制错误状态。试试这个：

function showErrors() {
    $('#program').addClass('error');
}

然后添加这个CSS:

#program.error {
     -webkit-box-shadow: 0px 0px 2px 2px rgba(255,0,0,1);
     -moz-box-shadow': 0px 0px 2px 2px rgba(255,0,0,1);
     box-shadow': 0px 0px 2px 2px rgba(255,0,0,1);
}

当然，当错误被清除时，你需要删除这个class，所以运行在适当的时候这样做：

$('#program').removeClass('error');

将 Chosen.js CSS 更改为 JQuery

Change Chosen.js CSS with JQuery

html

javascript

css

jquery

jquery-chosen