最近、たくさんのフォームでプロジェクトを作りました。よく使われるフォームはすべて使われていますが、フォームはMac用Safariブラウザ、と同様iphone内蔵ブラウザには、Firefoxブラウザ表示される効果は常に不十分です。デフォルトのスタイルをリセットするために多くの作業を行いましたが、それでも十分ではないようです。したがって、プロジェクトが終了した後、フォームスタイルをリセットするCSSとその対応するシーン。
1.最初に、プロジェクトで使用される
入力入力要素の導入について、一般的に使用されるhtmlフォーム要素MDN公式Webサイトを要約します。
input type="text"
input type="number"
input type="password"
input type="radio"
input type="checkbox"
input type="email"
input type="tel"
input type="search"
上記は、このプロジェクトで使用されるフォーム要素です
。2 。フォーム要素のcssをリセットする
各ブラウザコアには、html要素に課されるデフォルトのcssスタイルがいくつかあります。これらのスタイルをオーバーライドするcssを記述しない場合、次に、フォーム要素がブラウザのデフォルトスタイルの一部を継承し、目的の効果が得られない場合があります。
クロムに付属する入力スタイルは、図1-1に示すとおりです。
フォーム要素をリセットするために最も一般的に使用されるcss
-webkit-appearance: none;
appearance:none;
-moz-appearance:none;
outline: none;
しかし、結果は入力タイプ=「数値」、入力すると、小さな上下の矢印が表示されます。それらを削除する必要があります
/*chrome remove input[number]的上下箭头*/
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button{
-webkit-appearance: none !important;
margin: 0;
}
/*Firefox remove input[number]的上下箭头*/
input[type="number"]{
-webkit-appearance: none;-moz-appearance:textfield;outline: none;}
時間が限られているので、まずはたくさん書いておく必要があります。他にご不明な点がございましたら、お気軽にご相談ください。