placeholderの擬似クラスが効かない場合の原因の1つ「bootstrap」

input要素などのplaceholderの色を変えたくて、

::placeholder{
color:#cccccc;
}

と、CSSファイルに記載してみたが適応されずにすごく困った。

色々調べていると、どうやらbootstrapを使っていることが原因のようだった。

そこで、記事にあるように下記のようにしてみた。

.form-control::placeholder{
color:#cccccc;
}

がしかし、これでもplaceholderの色が変わらず。

困ってあれこれ試してみたところ、上記をCSSファイルに書き込んでそれをHTMLファイルに読み込む場合は効かないが、HTMLファイルに直接書き込んだ場合は適用されるっぽいことが判明。

CSSファイルはbootstrapの後に読み込んでいたので、直書きしてもファイルに記載して参照しても結果は同じような気がするが・・・

とりあえず直書きすることで解決できたので一応こちらの記事に残しておく。

最後に

gokeでは上記のようなプログラムを駆使して新しいサービスを制作しています。気になることなどがあればコメントまたはTwitterでご連絡ください。