iOS Safariのinput要素によく使う3つのCSSプロパティ

普段PCのブラウザで開発をしていているWebサイトをiOSの実機端末で確認してみたら、input要素が思った通りの見た目になっていなかった。そんなことがよくあります。僕がよく遭遇する3つの問題の解決方法をそれぞれ紹介します。

input要素の角が丸くなってしまう問題

それが入力できる箇所であることがわかるように、という配慮で角丸になっているのだと思います。案件によっては角を四角くしたい場合がありますね。そんな時は border-radius を 0 にしましょう。

input {
  border-radius: 0;
}

ちなみに border-radius: none; ではありません。よくやってしまいます。

input要素の上側につく影を消したいというケース、多いと思います。こちらも角丸同様に入力箇所をわかりやすくしたい意図がきっとあるのでしょう。appearance を none にすると消せます。

input {
  -webkit-appearance: none;
}

参考ページ：

input要素に line-height を指定した場合に、入力した文字が天地中央にならず、上付きになってしまうことがありました。おとなしく line-height の指定をやめて解決しました。

input {
  line-height: normal;
}

もし line-height を使って窮屈な印象を軽減しようとしていたならば、代わりに padding を使うことでおなじ効果が得られます。