納豆、Web、雑記など

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

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

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

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

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

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

スポンサーリンク

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

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

myakura.github.io

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

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

参考リンク:
placeholderを指定したときにAndroidでテキスト表示位置を中央にしたい | mmt45

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

参考リンク:
::placeholder - CSS | MDN

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

参考リンク:
Can I use... Support tables for HTML5, CSS3, etc

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

具体的な方法

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

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

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

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

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

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

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

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

iPhone だけ調整する方法

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

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

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

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

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

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

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

スポンサーリンク