绵阳梓潼网站制作公司

css--处理输入框后颜色问题

  1. input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill {  

    成都创新互联专注于江汉网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供江汉营销型网站建设，江汉网站制作、江汉网页设计、江汉网站官网定制、小程序开发服务，打造江汉网络公司原创品牌,更为您提供江汉网站排名全网营销落地服务。

  2.     -webkit-text-fill-color: #ededed !important;  

  3.     -webkit-box-shadow: 0 0 0px 1000px transparent  inset !important;  

  4.     background-color:transparent;  

  5.     background-image: none;  

  6.      transition: background-color 50000s ease-in-out 0s; //背景色透明  生效时长  过渡效果  启用时延迟的时间  

  7. }  

  8. input {  

  9.      background-color:transparent;  

  10. } 


input{outline:none;}

这样点击输入框的时候就不会触发边框颜色了

input:-webkit-autofill { box-shadow: 0 0 0px 1000px white inset;}

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

 

  1. input:-webkit-autofill {

  2. background-color: #FAFFBD;

  3. background-image: none;

  4. color: #000;

  5. }

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

css--处理输入框后颜色问题

情景一：input文本框是纯色背景的

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

  1. input:-webkit-autofill {

  2. -webkit-box-shadow: 0 0 0px 1000px white inset;

  3. border: 1px solid #CCC!important;

  4. }

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

  1. input:-webkit-autofill {

  2. -webkit-box-shadow: 0 0 0px 1000px white inset;

  3. border: 1px solid #CCC!important;

  4. height: 27px!important;

  5. line-height: 27px!important;

  6. border-radius: 0 4px 4px 0;

  7. }

情景二：input文本框是使用图片背景的

这个比较麻烦，目前还没找到完美的解决方法，有两种选择：

1、如果你的图片背景不太复杂，只有一些简单的内阴影，那个人觉得完全可以使用上面介绍的方法用足够大的纯色内阴影去覆盖掉×××背景，此时只不过是没有了原来的内阴影效果罢了。

2、如果你实在想留住原来的内阴影效果，那就只能牺牲chrome自动填充表单的功能，使用js去实现，例如：

  1. $(function() {

  2. if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {

  3. $(window).load(function(){

  4. $('ul input:not(input[type=submit])').each(function(){

  5. var outHtml = this.outerHTML;

  6. $(this).append(outHtml);

  7. });

  8. });

  9. }

  10. });

遍历的对象可能要根据你的需求去调整。如果你不想使用js，好吧，在form标签上直接关闭了表单的自动填充功能：autocomplete=”off”。

        三、使用网上的几种处理方法后的问题： 

方法一：

添加如下代码：

 

input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0px 1000px white inset;
}

问题为：第一次打开页面，文本框正常，为白色背景，如下面左图；但是点击文本框后，背景再次被填充为×××了，如下面右图；所以未达到效果。

css--处理输入框后颜色问题

第一次打开页面文本框没有填充×××背景，点击获得焦点后也没有填充×××背景，我自己添加的外边框蓝色阴影也还有。算是达到了预期效果。


网站标题：css--处理输入框后颜色问题
文章URL：http://myzitong.com/article/pjoedg.html

其他资讯