web front-end entry to the real: css to achieve modify the browser default style for form autofill

When the present input [password] form, the use submit submit. It will trigger the browser automatically fill out forms. For example, after chrome automatic filling, panic light color input box instead of the background style, look a little weird. So cancel the default style for form autofill browser how to achieve it through css?

Solution one:

When the text input box is a solid color background, can input: the -webkit-autofill sufficiently large to cover the solid shadow input color Background panic input box; such as:

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

If you have rounded corners and other attributes, the frame length of the input or found not quite height can be adjusted, in addition to chrome defined by default background-color, background-image, color can not! Important than the priority upgrade, other important attributes can be used to enhance their priorities, such as!:

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>

Small partners interested in the web front end this technology can be added to our study circle, the sixth year of work, learning to share some with you to develop practical details that need attention. 767-273-102 autumn dress. From the zero-based front-end to learn how to start. Are a group of people with a dream, we may be in different cities, but we will walk together with the front tip of the tip

Solution two:

input text box is to use the picture background. css code is as follows:

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

Use css3 animation will extend the delay time change its background color as possible.

Guess you like

Origin blog.51cto.com/14568129/2442896