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

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

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;
}
posted @ 2018-11-15 16:48  开尔  阅读(2370)  评论(0编辑  收藏  举报