本物へのWebフロントエンドエントリ:CSSフォームのオートフィルのために、ブラウザのデフォルトスタイルを変更達成するために

存在する場合、入力[パスワード]の形式、使用が提出提出します。これは、フォームに必要事項を記入、自動的にブラウザがトリガされます。例えば、クロム自動充填した後、代わりに背景スタイルの光色の入力ボックスをパニック、少し奇妙に見えます。だから、CSSを通してそれを達成するためにどのようにフォームのオートフィルブラウザのデフォルトスタイルをキャンセル?

解決策1:

テキスト入力ボックスは、無地の背景である場合、入力することができる:固体シャドウ入力色の背景パニック入力ボックスをカバーする-webkit-オートフィル十分に大きく、例えば:

web前端开发学习Q-q-u-n: 767273102 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)
input:-webkit-autofill {
   -webkit-box-shadow: 0 0 0px 1000px white inset;
   border: 1px solid #CCC!important;
}

、入力されたフレームの長さや見つからない、かなりの高さを調整することができるコーナーや他の属性あなたは四捨五入している場合は、ほかに、デフォルトの背景色、背景画像によって定義されたChromeに色がすることはできません!優先のアップグレードよりも重要な、他の重要な属性は、このような、その優先順位を向上させるために使用することができます!:

input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
border: 1px solid #CCC!important;
height: 27px!important;
line-height: 27px!important;
border-radius: 0 4px 4px 0;
}</span>

この技術を終了するWebフロントに興味を持って小さなパートナーは、注意が必要な実践的な内容を開発するためにあなたといくつかを共有することを学ぶ、私たちの研究サークル、作品の第六年に追加することができます。767-273-102秋のドレス。ゼロベースのフロントエンドから起動する方法を学習します。夢を持つ人々のグループは、我々は別の都市にあってもよいが、我々は一緒に歩いていく先端の先端

対処方法2:

入力テキストボックスには、画像の背景を使用することです。次のようにCSSのコードは次のとおりです。

input:-webkit-autofill{/*填充样式效果取消*/
    background: none !important;
    -webkit-text-fill-color: #fff !important;
    transition: background-color 99999s ease-in-out 0s;
    -webkit-transition-delay: 99999s;
}

CSS3アニメーションが可能な限りその背景色を変更する遅延時間を延長します使用してください。

おすすめ

転載: blog.51cto.com/14568129/2442896
おすすめ