Front-end development to combat the entry: 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, light ××× input box instead of the background style, it looks 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 ××× BACKGROUND input box; such as:

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>

To help make learning easy, efficient and free for everyone to share a large number of resources to help you become the front-end engineers, and even the way through the clutter full stack engineers. We are here to recommend a full-stack Learning Exchange front-end circle: 784783012 Welcome to flow into ××× discussion, learning exchanges and common progress.
When the real beginning of learning will inevitably do not know where to start, leading to inefficiencies affect confidence to continue learning.
But the most important thing is I do not know what needs to master key technologies, frequently stepped pit learning, end up wasting a lot of time, it is effective or necessary resources.

Learning the front, we are serious

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/14284898/2402962