だれかのなにかに役立てるウェブ制作者YoTaの趣味ブログ

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

先日、スマホでtextareaにtext-indentが効かない時がありました。この時のひとまずの対処法はpaddingでなんとかなります。

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

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

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

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

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

ページ上部に戻る