网站表单输入框去除浏览器默认样式
网页不可避免的使用到表单,提交一些内容到后端,进行前后端交互。可是由于浏览器总是有各自的默认样式,所以需要对其进行清除。总的来说有以下几种:
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; }