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

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

解決策1:

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

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>

誰もがあなたが乱雑フルスタックエンジニアによるフロントエンドエンジニア、さらには道になるため大量のリソースを共有するために、簡単で効率的かつ無料の学習に役立つために。私たちは、フルスタックの学習Exchangeフロントエンド円をお勧めするためにここにいる:784783012は、交流と共通の進捗状況を学習し、×××議論に流入へようこそ。
学習の本当の始まりは、必然的に開始する場所がわからないだろう場合は、非効率につながる学習を継続する自信に影響を与えます。
しかし、最も重要なことは、私がキーテクノロジーを習得する必要があるかわからないで、頻繁に、ピット学習を強化多くの時間を無駄に終わる、それが効果的か、必要な資源です。

フロントの学習、我々は深刻です

対処方法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/14284898/2402962
おすすめ