1. アドベネック
  2. アドベネックのブログ
  3. HTML
  4. iOSとAndroidでのinput要素のcss

Posted on Jul 28, 2016 by Naitou

iOSとAndroidでのinput要素のcss

記事カテゴリー: HTML

同じcssを設定しているのにiOSとAndroidで見え方が違うときの対処について

input要素の初期設定

iOSのでSafariではinput要素に角丸やシャドウのcssが初期設定されています。
まずはこれらの初期設定をクリアします。

input[type=”text”],
input[type=”submit”]{
  -webkit-appearance: none;
  border-radius: 0;
}

input要素全体にcssを適用すると、ラジオボタン等にも影響が出るので、必要な要素のみ[type=””]で指定します。
初期設定をクリアしたら、デザインに合わせてcssを設定していきます。
初期設定をクリアすることでiOSとAndroidの見え方が揃います。

placeholderを天地中央に表示したい。

Androidでplaceholderがずれる

Androidでplaceholderがずれる時は、input要素に設定されたline-heightが原因のようです。
input要素の余白をline-heightではなくpaddingで取るようにします。この時、input要素には親のline-height設定が引き継がれているので、line-height:1;を追加します。

input[type=”text”]{
  line-height:1;
  padding:5px 3px;
}

iOSでplaceholderがずれる

iOSでplaceholderがずれる時は、ハックを使います。

::-webkit-input-placeholder {
  padding-top: 2px;
}

この記事をシェアする

このカテゴリーの一覧に戻る

内藤

この記事の投稿者

内藤Naitou

高専、専門学校卒という独学派が多いアドベネックの中で唯一コンピューター言語を学校で学んだスタッフでありながら、ペンタブレットを使ったイラスト作成なども担当できるレアキャラ。NINTENDO好き。ゲームを買って積んでおくのが趣味。

  • Ps
  • Ai
  • Dw

同じカテゴリーの投稿

最近の投稿

記事のカテゴリー

アドベネックのSNS