web-dev-qa-db-ja.com

iOSは入力に丸い角とグレアを強制します

iOSデバイスは、特にinput [type = submit]のフォーム入力に多くの迷惑なスタイルを追加します。以下に示すのは、デスクトップブラウザーとiPadの同じ簡単な検索フォームです。

デスクトップ：

Desktop

iPad：

iPad

Input [type = text]はCSSボックスシャドウインセットを使用し、-webkit-border-radius：noneも指定しました。どうやらオーバーライドされます。 input [type = submit]ボタンの色と形がiPadで完全にろくでなしになります。誰も私がこれを修正するために何ができるか知っていますか？前もって感謝します。

cssiosforms
90
inorganik

私が働いていたバージョンは次のとおりです。

input {
    -webkit-appearance: none;
}

一部のWebkitブラウザーバージョンでは、border-radiusがまだ配置されている場合があります。以下でリセットします。

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

これは、form、input、select、またはbuttonなど、すべてのWebkitスタイルのtextareaコンポーネントに適用するように拡張できます。

元の質問を参照すると、ユニットベースのcss要素をクリアするときに値「none」を使用しません。また、これによりChromeのチェックボックスが非表示になるため、代わりにinput[type=text]またはinput:not([type=checkbox]), input:not([type=radio])のようなものを使用することにも注意してください。

177
marksyzm

これにより、さらにいくつかのWebkitフォーム、入力などをスタイリングできます。

input, textarea, select {
   -webkit-appearance: none;
}
17
nick

送信ボタンには以下を使用しないでください。

<input type="submit" class="yourstylehere" value="submit" />

代わりに、ボタンタグを使用します。

<button type="submit" class="yourstylehere">Submit</button>

これは私のために働いた。

3
Digital Robot Gorilla

normalize.css をご覧ください

フォーム要素をテストし、iosでどのように見えるかを確認できるデモがあります。複数のWebkit指向のプロパティがあります。

1
Rdpi

これは私のプロジェクトで使用するものです

* { 
    -webkit-tap-highlight-color: transparent; 
}
a, article, div, h1, h2, h3, h4, h5, h6, img, section, span {
    -moz-user-select: none; 
    -webkit-user-select: none; 
}
input, select, textarea { 
    -webkit-appearance: none; 
    -webkit-border-radius:0; 
    border-radius: 0; 
}
1
Waqar Alamgir

次のものがある場合、一部のブラウザでもこの問題が発生します。

<a class="btn btn-primary" href="#" type="button">Link</a>

の代わりに：

<a class="btn btn-primary" href="#" role="button">Link</a>

これは、アンカー要素の入力要素を変更し、typeをroleに変更するのを忘れた場合に発生する可能性があります。

この問題は、iPadのChromeとSafariの両方で発生しました。

0
Dirk