网站表单输入框去除浏览器默认样式

网页不可避免的使用到表单，提交一些内容到后端，进行前后端交互。可是由于浏览器总是有各自的默认样式，所以需要对其进行清除。总的来说有以下几种：

1、input输入框获取焦点的时候，默认带蓝色边框，如果设计要求不带蓝色边框可以按照以下方式处理：

input{outline:none;}

同时，一些textarea、select、button控件也会带有边框，所以可以在网站的通用css文件中进行如下设置：

nput,button,select,textarea{ outline:none;}

2、chrome浏览器自动填充的内容默认带黄色背景色，如何去除呢？可以按照以下方式进行设置：

　 chrome表单自动填充后，input文本框的背景会变成偏黄色的，这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性，然后对其赋予以下样式：

在有些情况下，这个黄色的背景会影响到我们界面的效果，尤其是在我们给input文本框使用图片背景的时候，原来的圆角和边框都被覆盖了。具体设置方式如下：

法一：可以对input:-webkit-autofill使用足够大的纯色内阴影来覆盖input输入框的黄色背景：

input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
border: 1px solid #CCC!important;
}

方法二：如果有使用圆角等属性，或者发现输入框的长度高度不太对，可以对其进行调整，除了chrome默认定义的background-color，background-image，color不能用!important提升其优先级以外，其他的属性均可使用!important提升其优先级，如：

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;
}

3、表单input输入框placeholder字体大小及颜色修改配置：

::-webkit-input-placeholder { /* WebKit browsers */
    color:#999;font-size:14px;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:#999;font-size:14px;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color:#999;font-size:14px;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:#999;font-size:14px;
}

来源：oschina

链接：https://my.oschina.net/u/4256075/blog/3750357

标签

webkit

Chrome

autofill