【inputタグの悩み】iPhoneやIEのインプットタグのCSSスタイルを全て「appearance」で同じにする

【inputタグの悩み】iPhoneやIEのインプットタグのCSSスタイルを全て「appearance」で同じにする

ブラウザでみるとOKなんですが、
よく実機のiphoneで見るとあれ?何かインプットタグのかたちが違うなということがあります。

そんな時はcssに「appearance」を付けてあげましょう。

input {
-webkit-appearance: none; >Chrome, Safari
-moz-appearance: none; >firefox
-ms-appearance:none; >IE
-o-appearance: none; >Opera
appearance: none;
}

すると直ります!

セレクトボックスの▼矢印なんかでもOK

IEで矢印が出てしまうなどの場合もこのスタイルを適用すれば解決です。

参考サイト:https://handywebdesign.net/2017/10/iphone-ios-input-css/







この記事をSNSでシェアするには以下リンクから

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ABOUTこの記事をかいた人

ジュタカ

海外駐在員として、アジアで働いております。当ブログでは、「世界」をテーマに仕事や旅行情報を個人の体験談を交えながら発信しております。また、「タイ」と「ボクシング」が好きでこの分野の情報も多いです。

【趣味】ボクシング、旅行
【好きな国】タイ、香港・澳門

詳細プロフィールはこちらから