ブートストラップ選択のプレースホルダーの色を変更する方法

Question

Bootstrap-selectドロップダウンボックスのプレースホルダー/タイトルの色を変更したいと思います。今のところ、これは黒く、暗い灰色にしたい。

Before

私は正常に動作します私のcss

span.filter-option.pull-left { 
    color: darkgrey; 
} 

After、これを追加してみました。しかしこれにより、オプションは黒色でなく暗い灰色になりました。 See here.すべてのオプションではなく、プレースホルダの色を濃いグレーに変更したいだけです。これをどのようにして最高に達成するのですか？ありがとう。

HTML：

<select name="box" class="selectpicker form-control"> 
    <option value="">Select</option> 
    <option value="option1"> Option 1 </option> 
</select> 

EDIT：

ピュアCSSのスタイリングは、何らかの理由で私のために動作するようには思えません。ブートストラップ・セレクトのネイティブタイトルのプロパティを使用しようとしましたが、ドキュメントに示されているようにグレー表示されていません。 "Select"か "Option 1"かによって、span.filter-option.pull-leftの色を変更するJavascript/JQueryの方法はありますか？

PS。これはChromeのインスペクタツールでSelect と表示され、Option 1の場合は他のオプションはありません。

Answer 1

主な問題は、プラグイン（bootstrap-select）にこれを行うための設定方法がないことです。あなただけ（select上multiple属性以外の）単一の選択を使用している場合は、値が選択されたときに設定し@input-color-placeholder変数を使用する（あなたがLESSを使用している場合）、追加するbs-placeholderクラスに依存することができます色：

.bootstrap-select { 
    ... 

    // The selectpicker button 
    > .dropdown-toggle { 
    ... 

    &.bs-placeholder, 
    &.bs-placeholder:hover, 
    &.bs-placeholder:focus, 
    &.bs-placeholder:active { color: @input-color-placeholder; } 
    } 
    ... 
} 

これの唯一の問題は、それが複数の選択だ場合、プラグインは、クラスを追加していないということですので、あなたは値が選択されているかどうかを判断するために少し創造的な取得する必要があります。残念ながら、私がデフォルトで起きることがわかる唯一のDOM属性操作は、タイトルが.dropdown-toggleに変更されていることです。それであれば、

今

.bootstrap-select > .dropdown-toggle[title=Select], 
.bootstrap-select > .dropdown-toggle[title=Select]:hover, 
.bootstrap-select > .dropdown-toggle[title=Select]:focus, 
.bootstrap-select > .dropdown-toggle[title=Select]:active { color: darkgrey; } 

：あなたはCSSに初期title属性をハードコーディング気にしない場合は、タイトルがそう（https://jsfiddle.net/gxvqa5xa/）のような一定の値である場合に色が変化するクラスを追加することができますあまりにも汚れていたり、信頼できない、プラグインはイベントリスナーをサポートしていますので、あなただけの（私はこの方法を好む）、変更のために耳を傾け、それは空白だかどうかを確認し、それがある場合は、クラスを追加することができます。

$('.selectpicker').on('changed.bs.select', function (e) { 
 
\t $(this).prevAll('.dropdown-toggle').toggleClass('bs-placeholder', this.value === ''); 
 
}).trigger('changed.bs.select');

@import url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css); 
 
@import url(https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.0/css/bootstrap-select.css); 
 
*{outline:none !important;} 
 

 
.bootstrap-select > .dropdown-toggle.bs-placeholder, 
 
.bootstrap-select > .dropdown-toggle.bs-placeholder:hover, 
 
.bootstrap-select > .dropdown-toggle.bs-placeholder:focus, 
 
.bootstrap-select > .dropdown-toggle.bs-placeholder:active { color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.0/js/bootstrap-select.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script> 
 

 
<select name="box1" class="selectpicker form-control" title="Select"> 
 
    <option value="option1"> Option 1 </option> 
 
    <option value="option2"> Option 2 </option> 
 
    <option value="option3"> Option 3 </option> 
 
</select> 
 
<select name="box2" multiple class="selectpicker form-control" title="Select"> 
 
    <option value="option1"> Option 1 </option> 
 
    <option value="option2"> Option 2 </option> 
 
    <option value="option3"> Option 3 </option> 
 
</select>

Answer 2

ブートストラップ選択の仕組みはわかりませんが、CSSには属性セレクタがありますので、使用することができます。 何か

elements[attribute] { 

} 

よう******* EDIT 1 ********

BS-選択に掘り後、私はこの

<select class="selectpicker" title="Choose one of the following..."> 
    <option>Mustard</option> 

    <option>Ketchup</option> 
    <option>Relish</option> 
</select> 

のようなものを見つけました茶色のプレースホルダが配置されます。

**** EDIT 2 * *****

の作業コード全体のselectタグに異なる色を設定し

button.bs-placeholder[role='button']>span{ color:darkgrey; }

Answer 3

1. 。
2. チェックされていないすべての要素に対して通常の色を設定します。

select { color: red; } 
 
option:not(:checked) { color: black; } 
 
option:checked { color: black; }

<select name="box" class="selectpicker form-control colored-title"> 
 
<option value="" selected="selected">Select</option> 
 
<option value="option1"> Option 1 </option> 
 
</select>

https://jsfiddle.net/ojdoug22/

編集：

option:checked { color: black; } 

ちょうどあなたのCSSに次の行を追加します。

新JSFiddle： https://jsfiddle.net/ojdoug22/1/

EDIT2： を追加しましたスクリーンショット。私は赤い "タイトル"選択オプションを参照し、他のすべては黒です。私が別のものを選択すると、それが変わります。