iOSでボタンのデフォルトスタイルをリセット

この記事の前提条件

対象: CSS(主にiOS Safari)
難易度: ★☆☆
所要時間: 約5分

PCのブラウザでは意図通りにデザインできているボタンなのに、iPhoneのSafariで見ると角が丸くなったり、グラデーションのかかったiOS標準の見た目に引っ張られてしまうことがあります。これは、iOS Safariが<input type="submit">や<input type="button">に、独自のネイティブなボタン装飾を適用しようとするために起こります。CSSでこのネイティブスタイルをリセットし、指定した見た目通りに表示させる方法を紹介します。

目次非表示

CSS
- 各プロパティの役割
SCSSの場合
まとめ

目次へ

CSS

input[type="submit"],
input[type="button"] {
  -webkit-appearance: button;
  appearance: button;
  box-sizing: border-box;
  border: none;
  border-radius: 0;
  cursor: pointer;
}
input[type="submit"]:focus,
input[type="button"]:focus {
  outline-offset: -2px;
}

各プロパティの役割

-webkit-appearance: button;: 一見「ボタンの見た目にする」指定に見えますが、これはNormalize.cssでも採用されている定番のおまじないです。iOS Safariには、これを明示的に指定しないと以降のCSS(border-radiusやbackgroundなど)が正しく上書きされない、という古くからの不具合があり、その回避策として使われています。
box-sizing: border-box;: paddingやborderを含めた指定通りのサイズで描画されるようにします。
border: none; / border-radius: 0;: iOS標準の枠線・角丸を打ち消し、自分で指定したデザインに揃えます。
cursor: pointer;: PCでマウス操作した時に、クリックできることが分かるようカーソル形状を変えます。

⚠️ :focusは疑似要素ではなく疑似クラス

focusを::focusのようにコロン2つ(疑似要素の書き方)で書いてしまうと、CSSとして無効な指定になり、そのルールごと適用されません。focusはあくまで疑似クラスなので、コロン1つの:focusが正しい書き方です。フォーカス時のスタイルが効かない時は、まずこのコロンの数を疑ってみてください。

SCSSの場合

ネスト(入れ子)記法で書く場合は次のようになります。

input[type="submit"],
input[type="button"] {
  -webkit-appearance: button;
  appearance: button;
  box-sizing: border-box;
  border: none;
  border-radius: 0;
  cursor: pointer;

  &:focus {
    outline-offset: -2px;
  }
}