Removing input background colour for Chrome autocomplete?

前端 未结 30 1866
失恋的感觉
失恋的感觉 2020-11-22 04:02

On a form I\'m working on, Chrome is auto-filling the email and password fields. This is fine, however, Chrome changes the background colour to a pale yellow colour.

相关标签:
30条回答
  • 2020-11-22 04:18

    If you want to keep the autocomplete functionality intact you can use a bit of jQuery to remove Chrome's styling. I wrote a short post about it here: http://www.benjaminmiles.com/2010/11/22/fixing-google-chromes-yellow-autocomplete-styles-with-jquery/

    if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    $(window).load(function(){
        $('input:-webkit-autofill').each(function(){
            var text = $(this).val();
            var name = $(this).attr('name');
            $(this).after(this.outerHTML).remove();
            $('input[name=' + name + ']').val(text);
        });
    });}
    
    0 讨论(0)
  • 2020-11-22 04:20

    I have a better solution.

    Setting the background to another color like below didn't solve the problem for me because I needed a transparent input field

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

    So I tried some other things and I came up with this:

    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        transition: background-color 5000s ease-in-out 0s;
    }
    
    0 讨论(0)
  • 2020-11-22 04:21

    Thanks Benjamin!

    The Mootools solution is a little more tricky, as I can't get fields by using $('input:-webkit-autofill'), So what I've used is the following:

    if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    
      window.addEvent('load', function() {
        setTimeout(clearWebkitBg, 20);
        var elems = getElems();
        for (var i = 0; i < elems.length; i++) {
          $(elems[i]).addEvent('blur', clearWebkitBg);
        }
      });
    }
    function clearWebkitBg () {
      var elems = getElems();
      for (var i = 0; i < elems.length; i++) {
        var oldInput = $(elems[i]);
        var newInput = new Element('input', {
          'name': oldInput.get('name'),
          'id': oldInput.get('id'),
          'type': oldInput.get('type'),
          'class': oldInput.get('class'),
          'value': oldInput.get('value')
        });
        var container = oldInput.getParent();
        oldInput.destroy();
        container.adopt(newInput);
      }
    }
    function getElems() {
      return ['pass', 'login']; // ids
    }
    
    0 讨论(0)
  • 2020-11-22 04:22

    The previous solutions of adding a box-shadow works well for people who need a solid colour background. The other solution of adding a transition works, but having to set a duration/delay will mean that at some point it may show again.

    My solution is to use keyframes instead, that way it will always show the colours of your choosing.

    @-webkit-keyframes autofill {
        0%,100% {
            color: #666;
            background: transparent;
        }
    }
    
    input:-webkit-autofill {
        -webkit-animation-delay: 1s; /* Safari support - any positive time runs instantly */
        -webkit-animation-name: autofill;
        -webkit-animation-fill-mode: both;
    }
    

    Example Codepen: https://codepen.io/-Steve-/pen/dwgxPB

    0 讨论(0)
  • 2020-11-22 04:25

    In addition to this:

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

    You might also want to add

    input:-webkit-autofill:focus{
    -webkit-box-shadow: 0 0 0px 1000px white inset, 0 0 8px rgba(82, 168, 236, 0.6);
    }
    

    Other wise, when you click on the input, the yellow color will come back. For the focus, if you are using bootstrap, the second part is for the border highlighting 0 0 8px rgba(82, 168, 236, 0.6);

    Such that it will just look like any bootstrap input.

    0 讨论(0)
  • 2020-11-22 04:27

    I had an issue where I couldn't use box-shadow because I needed the input field to be transparent. It's a bit of a hack but pure CSS. Set the transition to a very long amount of time.

    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
    transition: background-color 50000s ease-in-out 0s, color 5000s ease-in-out 0s;
    }
    
    0 讨论(0)
提交回复
热议问题