iOS デバイスで入力ボタンのスタイルをカスタマイズし、デフォルトの外観を克服する方法

iOS デバイスのデフォルトの入力ボタンのスタイルを上書きする

CSS を使用して入力ボタンのスタイルを設定すると、Mac のデフォルトのスタイルと同様に、iOS デバイスで特有の課題が発生します。カスタムデザインを上書きします。これに対処するには、-webkit-Appearance: none; の採用を検討してください。財産。このプロパティを使用すると、デフォルトの Mac スタイルを削除し、代わりにカスタム CSS を適用できます。

iOS ボタンのカスタマイズのための追加オプション

-webkit-Appearance の使用以外: none; 、希望のスタイルを実現するための代替アプローチを検討できます:

• [-moz-Appearance] プロパティを使用します: Firefox およびその他の Mozilla ベースの場合iOS 上のブラウザでは、-moz-Appearance: none; を使用できます。 -webkit-Appearance: none; と同じ効果を実現するには、
• 送信ボタンとしてハイパーリンクを作成します: 回避策として、送信ボタンとして動作するハイパーリンク要素を作成できます。 。次の属性を に追加します。タグ: type="送信"。これにより、リンクがクリックされたときにフォームを送信するようにブラウザーに指示され、目的のスタイルに合わせたカスタム ボタン要素が提供されます。

/* Remove default iOS styling */
input[type="submit"] {
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Apply custom styling */
input[type="submit"] {
  background-color: #33b5e5;
  color: white;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 5px;
}