カテゴリー別アーカイブ: 知識・情報

iPhoneでinputボタンのCSSを有効化する方法

Web制作の工程で送信フォームで、ボタンCSSの有効化が必要になったので、スマホサイトの送信フォームのボタンCSSを有効化してみます。

 

 

はじめに最初の手順としては、まずスマホ閲覧時フォーム確認をします。

スマートフォンでは送信フォームのボタンなどのパーツCSSは、独自のものが優先して表示されるため、コード化時のデザインが正常に表示されているかを確認します。

 

 

その次に、指定セレクタを特定をします。

iPhoneなどでボタンパーツのCSS装飾がうまく反映されていない場合は、端末ブラウザのCSSが優先されているので、HTMLコーディング時にパーツに指定したCSSセレクタを特定をします。

 

 

最後の手順としてはベンダープレフィックスの無効化で、

セレクタを特定できたら、プロパティに以下を追加。

-webkit-appearance: none;

これはブラウザが先行で付けた見栄えの指定を無効にする記述でiPhoneなどで有効。という方法で完了します。

 

 

この手順の流れで気を付けたい事が、個別にプロパティ指定しても、CSS反映の優先度があるのですべてが優先されてしまう場合は、一度ベンダープレフィックスの無効化(リセット)をする必要があるという点について注意する必要があります。

掲載情報につきましては、当サイトが独自に調査、検証および収集した情報です。

情報の妥当性や確実性を一切保証するものでなく、情報や内容が訂正や修正、変更されている場合があります。 よって、当サイトの利用により生じたいかなる損害等についても運営側にて一切の責任を負いません。

掲載情報の修正・変更等をご希望の場合はお知らせください。