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

コーディング

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

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

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

input {
  border-radius: 0;
}

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

input要素の上側に影がついてしまう問題

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

input {
  -webkit-appearance: none;
}

参考ページ:

input要素に入力した文字が上にずれてしまう問題

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

input {
  line-height: normal;
}

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

この記事を書いた人

村田 智 @murata_s
アートディレクター/デザイナー
詳しくみる→
カテゴリー
コーディング
タグ
  • iOS
  • Safari
  • CSS
公開日
更新日
文字数
759文字
© 2004-2021 Satoshi Murata.