::placeholderを使ったプレースホルダーの位置調整と、iPhoneとかだけ位置を個別調整した話

ブログやサイトによくある検索ボックス。はてなブログにもありますよね。

この検索ボックスに前もって灰色の文字が書き込まれています。はてなブログでは「記事を検索」と書かれているものです。

これ、プレースホルダー（ placeholder ）と言うのですが

このプレースホルダーが、iPhoneとかブラウザとかでちょっと位置がズレているように感じることってありませんか？

これの位置をちょっと調整したので、その方法のご紹介です。

かなり細かい調整なので、必要ないかもしれませんけどね（笑）

ちなみにプレースホルダーについては、こちらの記事が非常に参考になります。

プレースホルダーの位置調整

プレースホルダーの位置調整については、調べてみますといろいろ出てきます。

formやinputをpaddingで変更するのも良かったのですが、今回はformやinputのスタイルを変更しなくても使える::placeholderで調整しました。

これはプレースホルダーの文字に直接スタイルを設定する疑似要素で、ベンダープレフィックスが付いているようにまだ試験段階の要素なのですが、ほとんどのブラウザで問題なく使えます。

こちらを使えば、プレースホルダーに直接スタイルが指定できます。従来あるformやinputは変更しなくてもいいので、スタイルの指定がラクにできます。

論より証拠です。こちらをご覧ください。

::placeholderは文字色も指定できます。使い方としては文字色を変えたり太字にしたりと、こっとのほうが使用頻度が高いと思います。

ブラウザによってプレースホルダーの文字色が変わるようにしています。IE なら赤、Edge は緑、Safari や Android ブラウザは青色。そして、ベンダーフレックスなしでもスタイルが適応されるブラウザなら紫色になります。

このような位置の調整の場合、よく使われるのはmarginかpaddingですが、::placeholderでスタイルが反映されるかどうかはブラウザによってマチマチです。

今のところposition:relativeが無難なように感じます。もっと他に良い方法があるかもしれませんが。

CSS コードを見ると同じような指定を何回も繰り返します。ほんとうは複数同時指定でまとめてスッキリさせたいところなのですが、それをすると上手く機能しません。

今のところ、一つ一つ設定していくしかないようです。

あ、指定するときは、:の数には注意して下さい。IE は1個（::）で、それ以外は2個（::）です。間違えるとスタイルが適応されません。

先ほど書きましたが、paddingはブラウザによって効いたり効かなかったりします。効果があるブラウザは、わたしの環境で確認できるものでは IE と iPhone のブラウザです。

これを逆に使えば、iPhone にだけpaddingを指定することが可能です。

やり方は簡単。::-webkit-input-placeholderにpaddingを指定するだけです。

.search-module-input::-webkit-input-placeholder {
    padding-top: 0.1em;
}

iPhoneは特にプレースホルダーの位置がズレているように見えます。この位置だけも変更するだけで、全てのブラウザでの表示を近づけることができるのではないのでしょうか。

この::placeholderは試験段階のもので、またブラウザのバージョンによっては効果があるスタイルが変わる時もあるので、今回の指定方法のままで今後も使えるかどうかは分かりません。

だけど、この::placeholder自体は使える所が多いと思いますので、覚えておきたいと思います。