スマホでtextareaにtext-indentが効かない時のひとまず対処法はpadding
先日、スマホでtextareaにtext-indentが効かない時がありました。この時のひとまずの対処法はpaddingでなんとかなります。
お問い合わせフォームなどに使用される、form構文のinput要素では、text-indent:1em;といったようにcssで指定してあげることで、入力文字およびplaceholderテキストを一字分空けて表示させることができます。
しかし、これがtextareaで同様に指定した時、スマホ端末(iPhoneXs)で反映されないことがありました。
・textareaにfont-familyの個別指定もしてる
・スマホ以外の端末(PCなど)であれば反映されてる
で、どうしたものかと思っていたんですが、調べてみたところ、あんまり他に人で同じようなエラーになっている人も少ないようで、サンプルの少ない事例でしたので、ひとまずの対処法で良いだろうと、textareaに横方向へのpaddingを指定して、一字分のスペースを作ることにしました。
とりあえずはこれで問題はなかったので、困った時は参考にしてみてください!(自分の備忘録も兼ねてます。また、きちんとした原因・もっとちゃんとした対処法が分かり次第、追記します。)