CSS を使用して iPhone Web ページ上のボタンの特大の角丸とテキスト ボックスの角丸のデフォルト スタイルを削除する_html/css_WEB-ITnose

iPhone のブラウザを使用して Web を閲覧すると、ボタンには常に非常に丸い角と上から下への色のグラデーションが表示され、非常に不快に見えます。また、テキスト ボックスにも特定の丸い角がありますが、境界線の定義-radius は効果がありません。検索したところ、webikt カーネル ブラウザーはプライベート属性 -webkit-Appearance を通じてコン​​トロールのデフォルト スタイルを設定していることがわかりました。現時点での解決策は、

input[type=submit],input[type=reset],input[type=button],input[type=text]{-webkit-Appearance:none;}

その中で、 - webkit-Appearance:none はデフォルトの入力スタイルを削除します。

現時点では、ボタンには非常に丸い角が表示され、上から下への色のグラデーションの嫌なスタイルは削除されていますが、ボタンの丸い角はまだ残っているため、border-radius:0 を追加する必要があります。スタイル。 border-radius:0; のみが可能であり、border-radius:none は使用できないことに注意してください。border-radius:none が使用されているため、iPhone ブラウザはそれを認識しないようで、依然として入力に丸い角を与えます。 5ピクセルくらい。フォームの角を丸める（5px など）必要がある場合は、border-radius:5px を自分で設定します。

フォームを作成するとき、一部のブラウザーではデフォルトのスタイルがフォームに割り当てられていることがわかります。たとえば、Chrome ブラウザーでは、テキスト ボックスとドロップダウン選択ボックスは、フォーカスを読み込むときに枠線が光ります。 Google Chromeでは、複数行のテキストエリアtextareaを自由にドラッグして拡大することができます。また、IE10では、テキストボックスに内容を入力すると、テキストボックスの右側に小さな十字が表示されます。これらの効果によってユーザー エクスペリエンスが向上したことは間違いありませんが、場合によってはこれらのデフォルト スタイルが必要ない場合、どうすればよいでしょうか?解決策を個別に見てみましょう。

1. Chrome やその他のブラウザでテキスト ボックスのデフォルトの照明付き境界線を削除します

input:focus, textarea:focus {
アウトライン: none;
}

ハイライト スタイルを削除します:

input:focus{
-webkit- Tap-highlight -color:rgba(0,0,0,0);
-webkit-user-modify:read-write-plaintext-only;
}

もちろん、テキスト ボックスがフォーカスを読み込むと、すべてのブラウザーがテキスト ボックスの境界線の色やスタイルは変更されませんが、次のように、必要に応じて再設定できます。 border: 1px Solid #f60;
}

この場合、テキスト ボックスにフォーカスが読み込まれると、境界線の色がオレンジ色に変わり、ユーザーにフィードバックが表示されます。

2. IE10以降のブラウザのテキストボックスの後ろにある小さな十字を削除します

次の文だけでOKです



input::-ms-clear {
display: none;
}

3. 複数のドラッグを禁止します。行テキスト ボックス textarea

を使用して、次のように属性を追加して複数行のテキスト ボックスを拡大または縮小できないようにします。これは要素のスケーリングに使用される CSS3 プロパティであり、次の値を取ることができます:

none デフォルト値

両方 水平方向と垂直方向のスケーリングを許可します

horizo​​ntal 水平方向のスケーリングのみを許可します

vertical 垂直方向のスケーリングのみを許可します

可能textarea 要素だけでなく、div などのほとんどの要素にも使用できます。ここではすべてをリストしませんが、textarea とは異なり、div を使用する場合は overflow: auto; を追加する必要があります。 :

div {
size:both;
overflow:auto;
}

上記はフォームブラウザのデフォルトスタイルの削除についてです。