iPhoneのsafariで見るとsubmitボタンのCSSが効いていない時の解決方法

タイトルの通りinputタグのタイプ属性値submitでできたボタンにCSSを設定してもiPhone(iOS)のsafariで見るとCSSが上手く効いていないことが分かります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>iPhoneでのsubmitボタン表示</title>
  <link rel="stylesheet" href="style.css?new">
</head>
<body>
  <input type="submit" value="送信する">
</body>
</html>
input{
  width: 100px;
  padding: 10px 0;
  border: none;
  background-color: #333;
  color: #fff;
}
iOS以外でのsubmitボタンの表示
iOS以外での表示
iPhone(iOS)でのsubmitボタンの表示
iPhone(iOS)での表示

これはiPhone(iOS)特有のバグなのですが、iPhoneのデフォルトスタイルが優先されてしまっていてCSSが効かないといった事例です。

そこでこのiOSのデフォルトのスタイルをリセットしてあげる必要があるのですが、そのときに使うのがappearanceプロパティと呼ばれるプロパティです。

appearanceプロパティを指定することでOSによって異なる標準的な部品(ユーザーインタフェース)のスタイルをリセットすることができます。(主にinputタグに対するスタイルのリセット目的等で使用されます。)

appearanceプロパティ = OSによって異なる標準的な部品(ユーザーインターフェース)のスタイルをリセットできるプロパティ

なお2021年9月現在、iOSではベンダープレフィックスがないとappearanceプロパティが使えないようなので、appearanceプロパティの頭にベンダープレフィックス「-webkit-」を付ける必要があります。

引用元: Can I use?(https://caniuse.com/?search=appearance)
input[type="submit"] {
  appearance: none;
  -webkit-appearance: none;
  }

input{
  width: 100px;
  padding: 10px 0;
  border: none;
  background-color: #333;
  color: #fff;
}
appearanceプロパティを指定した後のiOSでのsubmitボタンの表示

これでCSSの指定が効くようになりました。

なお、若干ボタンの角が丸みを帯びていますが、この丸みを消したいといった場合は追加でboder-radiusプロパティ、値0を追加してあげればこの丸みもリセットしてあげることができます。

よかったらシェアしてね!

コメント

コメントする

CAPTCHA