Bootstrap 3でプレースホルダーの色を変えるのに失敗する

質問

質問は2つです。

1. プレースホルダーのテキストを白にしようと思っています。しかし、それは動作しません。Bootstrap 3を使用しています。 JSFiddle demo

2. もう一つの質問は、グローバルでなくプレースホルダーの色を変更する方法です。つまり、複数のフィールドがあり、1つのフィールドにだけ白いプレースホルダーを持たせ、他のフィールドはデフォルトの色のままにしておきたいのです。

事前にありがとうございます。

htmlを使用します。

<form id="search-form" class="navbar-form navbar-left" role="search">
    <div class="">
        <div class="right-inner-addon"> <i class="icon-search search-submit"></i>
            <input type="search" class="form-control" placeholder="search" />
        </div>
    </div>
</form>

cssを使用します。

.right-inner-addon {
    position: relative;
}
.right-inner-addon input {
    padding-right: 30px;
    background-color:#303030;
    font-size: 13px;
    color:white;

}
.right-inner-addon i {
    position: absolute;
    right: 0px;
    padding: 10px 12px;
    /*  pointer-events: none; */
    cursor: pointer;
    color:white;
}


/* do not group these rules*/
::-webkit-input-placeholder { color: white; }
FF 4-18 
:-moz-placeholder           { color: white; }
 FF 19+
::-moz-placeholder          { color: white; }
 IE 10+
:-ms-input-placeholder      { color: white; } 

どのように解決するのですか？

このようにクラスセレクタにプレースホルダを代入します。

.form-control::-webkit-input-placeholder { color: white; }  /* WebKit, Blink, Edge */
.form-control:-moz-placeholder { color: white; }  /* Mozilla Firefox 4 to 18 */
.form-control::-moz-placeholder { color: white; }  /* Mozilla Firefox 19+ */
.form-control:-ms-input-placeholder { color: white; }  /* Internet Explorer 10-11 */
.form-control::-ms-input-placeholder { color: white; }  /* Microsoft Edge */

より強力なセレクタがグローバルを上書きしている可能性があるので、これでうまくいきます。私はタブレットを使用しているので、それがどの強力なセレクタであったかを検査し、確認することはできません:)。しかし、それはあなたのフィドルでそれを試してみました動作します。

これは2番目の質問の答えでもあります。クラスまたはIDに割り当て、そのクラスのみを入力に与えることで、どの入力をスタイルするか制御することができます。