解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题 && 一般的浏览器input和button的高度不一致问题...

解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题 

　如果我们把一个表单设置位 autofocus ，这时这个表单在获取焦点后就会产生淡黄色的背景，我们就是使用!important的方法也无法去除。

 

解决方法一： 取消设置input表单的autofocus属性

 

解决方法二：对于没有背景图片的元素，添加下面的代码：

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px white inset;
  -webkit-text-fill-color: #333;
}

 

解决方法三： 对于有背景图片的元素，将背景图片拿出来，置于<label></label>中，再对input表单进行设置。

 

值得注意的是：除了chrome默认定义的background-color，background-image，color不能用 !important 提升其优先级以外，其他的属性均可使用!important提升其优先级。

 

 

 

 

一般的浏览器input和button的高度不一致问题

当我们在一行中写出input（type="text"）以及button以及select，我们可以发现，这几个的高度是不一致的， 主要问题是浏览器赋予的默认border不同而导致的。

解决方法： 将此三者的border设置为0即可发现设置同样的高度，它们就是一样高啦！！

 

 

input输入框在chrome下会有黄色的框，我们只需设置为 outline: 0 none; 即可。