web-dev-qa-db-ja.com

選択したjqueryの選択ボックスをスタイルする方法

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-choicesulのc​​ssを直接記述しようとしました。一部はborder-radiusやbox-shadowのように機能します。ただし、その他：margin, height, padding, borderなどはchosen.cssファイルによって上書きされます。 1つのオプションは、機能しないすべての設定に!importantを置くことです。これはほとんどのもので機能しますが、まだ高さではありません。何かご意見は？

jquerycssjquery-chosen
11
Lance Shi

CSSは、より指定されたセレクターを使用するスタイルを受け入れます。

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

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

Working fiddle

8
blurfx

JQueryを使用してみてください。これが実際の動作です [〜＃〜] jsfiddle [〜＃〜]

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

Chosen.cssの.chosen-choicesを見ると、高さがauto!importantであることがわかります。これらの!importantを削除（またはコメント）してください。

ブラウザーの要素インスペクターを使用して、適用されたCSSを確認できます。私は個人的にChrome開発ツールを毎回使用しています。手間を大幅に省いてください。

0
Joshua H

少し遅れましたが、これに遭遇したので、私は答えると思いました。表示される選択された項目は、非表示の選択メニューに基づいているため、その直後のdiv内の要素を見つけて（選択によって作成された）、スタイルを設定する必要があります。これは、値がわかっていると想定してJqueryで実行できます。

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

この結果
enter image description here

0
Bryan