web-dev-qa-db-ja.com

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; }
csscss3twitter-bootstrap-3placeholder
64
Ivan Wang

次のようにプレースホルダーをクラスセレクターに割り当てます。

.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に割り当て、そのクラスのみに入力を与えることにより、スタイルへの入力を制御できます。

178
Dennis Puzak

この件に関して次の問題が投稿されました： https://github.com/twbs/bootstrap/issues/14107

このコミットによって問題は解決されました： https://github.com/twbs/bootstrap/commit/bd292ca3b89da982abf34473318c77ace3417fb5

したがって、解決策は、提案されたwhiteではなく、#999にオーバーライドすることです（また、Webkitスタイルだけでなく、すべてのブートストラップスタイルをオーバーライドします）。

.form-control::-moz-placeholder {
  color: #999;
}
.form-control:-ms-input-placeholder {
  color: #999;
}
.form-control::-webkit-input-placeholder {
  color: #999;
}
22
mlunoe

考えられる落とし穴

推奨される健全性チェック-入力にform-controlクラスを必ず追加してください。

ページにbootstrap cssがロードされているが、入力に
class="form-control"場合、プレースホルダーCSSセレクターは適用されません。

ドキュメント からのマークアップの例：

これはOPのマークアップには当てはまらないことを知っていますが、最初はこれを逃し、デバッグしようとして少し努力したので、他の人を助けるためにこの答えを投稿しています。

6
cwd

Bootstrap 4を使用していますが、Dennis Puzakのソリューションは機能しません。

次の解決策は私のために働く

.form-control::placeholder { color: white;} /* Chrome, Firefox, Opera*/
:-ms-input-placeholder.form-control { color: white; }  /* Internet Explorer*/
.form-control::-ms-input-placeholder { color: white; }  /* Microsoft Edge*/
3
Oleksandr Potomkin

Bootstrapには、bootstrap.cssで生成されたプレースホルダーテキストの色を制御する3行のCSSがあります。

.form-control::-moz-placeholder {
  color: #999999;
  opacity: 1;
}
.form-control:-ms-input-placeholder {
  color: #999999;
}
.form-control::-webkit-input-placeholder {
  color: #999999;
}

これを独自のCSSファイルに追加しても、特定度が低いため、ブートストラップはオーバーライドされません。したがって、内部でフォームをアサートし、それをCSSに追加します。

form .form-control::-moz-placeholder {
  color: #fff;
  opacity: 1;
}
form .form-control:-ms-input-placeholder {
  color: #fff;
}
form .form-control::-webkit-input-placeholder {
  color: #fff;
}

ブートストラップのCSSをオーバーライドする出来上がり。

2
rhysclay

Boostrap Placeholder Mixin：

@mixin placeholder($color: $input-color-placeholder) {
  // Firefox
  &::-moz-placeholder {
    color: $color;
    opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
  }
  &:-ms-input-placeholder { color: $color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: $color; } // Safari and Chrome
}

今それを呼ぶ：

@include placeholder($white);
2
ßikrant Giri

Qwertzmanは、これに対する最善の解決策の正しい軌道に乗っていると思います。

特定のプレースホルダーのみをスタイルしたい場合、彼の答えはまだ当てはまります。

しかし、allプレースホルダーの色をオーバーライドしたい場合（これが可能性が高い）、および独自のカスタムBootstrap LESSを既にコンパイルしている場合、答えはさらに簡単です！

次のLESS変数をオーバーライドします：@input-color-placeholder

2
D. Starr

この答えを確認する必要があります： HTML5入力のプレースホルダーの色をCSSで変更

ほとんどのブラウザで動作します。たとえば、このスレッドのソリューションはFF 30+で動作していません

1
Hugo Gresse

LESSでは、実際のmixinはvendor-prefixes.lessにあります

.placeholder(@color: @input-color-placeholder) {
...
}

このミックスインは、forms.lessの133行目で呼び出されます。

.placeholder();

LESSでのソリューションは次のとおりです。

.placeholder(#fff);

私見行くための最良の方法。 Winlessを使用するか、Gulp/Gruntのようなcomposerコンパイラーも使用できます。

1
qwertzman

他の人は私の場合は動作しませんでした（ブートストラップ4）。これが私が使用した解決策です。

html .form-control::-webkit-input-placeholder { color:white; }
html .form-control:-moz-placeholder { color:white; }
html .form-control::-moz-placeholder { color:white; }
html .form-control:-ms-input-placeholder { color:white; }

.form-control要素をターゲットにするために高レベルの specificity を使用するため、これはブートストラップcssをオーバーライドします。

0
Nick4814