谷歌浏览器默认样式的修改

Posted 2020-08-31 开发的点点滴滴

1.Chrome自动填充的input背景为黄色：

box-shadow 向框添加阴影，默认是在框外面，inset改为向内添加。

box-shadow :H水平偏移量 V垂直偏移量 B模糊尺寸 S阴影尺寸 C阴影颜色 O/I内外影;

看阴影效果，先确定阴影尺寸，再确定偏移距离。

input:-webkit-autofill {  
    -webkit-box-shadow: 0 0 0px 100px white inset !important;  //不能为transparent的任意颜色，利用内部阴影遮住浏览器默认的黄色背景
　　 box-shadow: 0 0 0px 100px white inset !important;
} 

2.input获得焦点时的蓝色边框

　　利用元素的轮廓属性（不占长宽空间），outline: none;即可。