2つの質問:
プレースホルダーのテキストを白にしようとしていますが、うまくいきません。Bootstrap 3 を使用しています。
JSFiddle demo
もう 1 つの質問は、プレースホルダーの色をグローバルではなくどのように変更するかということです。つまり、複数のフィールドがあり、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; }
ベストアンサー1
次のようにプレースホルダーをクラスセレクターに割り当てます。
.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 に割り当て、そのクラスのみに入力を与えることで、スタイルを設定する入力を制御できます。