[解決済み] iOSは入力に角丸とグレア（光沢）を強制する

質問

iOS デバイスでは、フォーム入力、特に input[type=submit] に多くの厄介なスタイルが追加されます。以下は、デスクトップ ブラウザと iPad で同じシンプルな検索フォームを表示したものです。

デスクトップ

iPad

input[type=text] は CSS ボックス シャドウ インセットを使用し、さらに -webkit-border-radius:none; を指定しましたが、これは明らかに上書きされます。input[type=submit] ボタンの色と形は、iPad 上で完全に台無しになってしまいます。どなたか、これを修正する方法をご存知でしょうか？前もってありがとうございます。

どのように解決するのですか?

私が動作していたバージョンは

input {
    -webkit-appearance: none;
}

webkit ブラウザのバージョンによっては、このように border-radius が残っていることがあります。下記でリセットしてください。

input {
    -webkit-border-radius:0; 
    border-radius:0;
}

これを拡張して、webkit でスタイルされたすべての form のようなコンポーネントにも適用できます。 input , select , button または textarea .

元の質問についてですが、ユニットベースのCSS要素をクリアする際に値'none'を使うことはないでしょう。 また、Chromeではチェックボックスが非表示になるので、次のようなものを使用するとよいでしょう。 input[type=text] または input[type=submit], input[type=text] のような角丸の設定を使用しないものを除外するか、あるいは input:not([type=checkbox]), input:not([type=radio]) .