スマホでtextareaにtext-indentが効かない時のひとまず対処法はpadding

web制作

お問い合わせフォームなどに使用される、form構文のinput要素では、text-indent:1em;といったようにcssで指定してあげることで、入力文字およびplaceholderテキストを一字分空けて表示させることができます。

しかし、これがtextareaで同様に指定した時、スマホ端末(iPhoneXs)で反映されないことがありました。

・textareaにfont-familyの個別指定もしてる
・スマホ以外の端末(PCなど)であれば反映されてる

で、どうしたものかと思っていたんですが、調べてみたところ、あんまり他に人で同じようなエラーになっている人も少ないようで、サンプルの少ない事例でしたので、ひとまずの対処法で良いだろうと、textareaに横方向へのpaddingを指定して、一字分のスペースを作ることにしました。

とりあえずはこれで問題はなかったので、困った時は参考にしてみてください!(自分の備忘録も兼ねてます。また、きちんとした原因・もっとちゃんとした対処法が分かり次第、追記します。)

最後に一言

formは、もう少しなんとかならないのかなぁ。

この記事をSNSでシェアする?

スマホでtextareaにtext-indentが効かない時のひとまず対処法はpadding


  • 1
    このエントリーをはてなブックマークに追加
  • Pocket

PROFILE

yoshi

KIYOTATSU(キヨタツ)を運営しているウェブ制作者のYoshiです。得意な分野はディレクションとコーディングです。デザインはシンプルなものだけ可能です。他、色々と随時習得中です。