Как остановить Chrome от пожелтения полей ввода моего сайта?

Question

Среди других текстовых и наглядных пособий при отправке формы, после проверки, я окрашиваю поля ввода красным цветом, чтобы обозначить интерактивную область, требующую внимания.

В Chrome (и для пользователей панели инструментов Google) функция автозаполнения меняет цвета на мои формы ввода желтым цветом. Вот сложная проблема: я хочу, чтобы автозаполнение разрешалось в моих формах, так как оно ускоряет вход в систему пользователей. Я собираюсь проверить возможность отключить атрибут автозаполнения, если/когда произошла ошибка, но это сложный бит кодирования, чтобы программно отключить автозаполнение для одного затронутого входа на странице. Это, если быть проще, было бы главной головной болью.

Чтобы избежать этой проблемы, существует ли более простой способ остановки Chrome от повторной раскраски полей ввода?

[изменить] Я попробовал важное предложение ниже, и это не имело никакого эффекта. Я еще не проверил панель инструментов Google, чтобы убедиться, что для этого будет работать важный атрибут.

Насколько я могу судить, нет никаких средств, кроме использования атрибута autocomplete (который, как представляется, работает).

Answer 1

Я знаю, что в Firefox вы можете использовать атрибут autocomplete = "off", чтобы отключить функциональность автозаполнения. Если это работает в Chrome (не протестировано), вы можете установить этот атрибут при возникновении ошибки.

Это может быть использован как для одного элемента

<input type="text" name="name" autocomplete="off"> 

... а также для всей формы

<form autocomplete="off" ...> 

Answer 2

Если я правильно помню, важное правило в таблице стилей для цвета фона входов будет переопределять автозаполнение панели инструментов Google - по-видимому, то же самое относится и к Chrome.

Answer 3

Да, это была бы серьезная головная боль, которая, на мой взгляд, не стоит возврата. Возможно, вы немного изменили свою стратегию пользовательского интерфейса, и вместо того, чтобы раскрасить красную рамку, вы можете покрасить границы красным цветом или поместить небольшую волокиту рядом с ней (например, ленту «Загрузка»), которая исчезает, когда поле находится в фокус.

Answer 4

Установите свойство CSS наброски к нет.

input[type="text"], input[type="password"], textarea, select { 
    outline: none; 
} 

В тех случаях, когда браузер может добавить цвет фона, а также это может быть закреплен на что-то вроде

:focus { background-color: #fff; } 

Answer 5

Используя немного JQuery вы можете удалить стиль Chrome, сохраняя при этом функциональность автозаполнения нетронутыми ,Я написал короткий пост об этом здесь: 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); 
    }); 
});} 

Answer 6

Чтобы удалить границу для всех полей, которые вы можете использовать следующее:

*:focus { outline:none; }

Чтобы удалить границу для выберите поля просто применить этот класс для полей ввода вы хотите:

.nohighlight:focus { outline:none; }

Вы можете, конечно, изменить границы, как вы хотите, а также:

.changeborder:focus { outline:Blue Solid 4px; }

(от Билла Beckelman: Override Chrome's Automatic Border Around Active Fields Using CSS)

Answer 7

С Mootools

function fixchromeyellow() 
{ 
    if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) 
    { 
     $$('input["input:-webkit-autofill"]').each(function(el) 
     { 
     el.clone().inject(el,"after"); 
     el.destroy(); 
     }); 
    } 
} 

window.setTimeout(fixchromeyellow, 500); 

---

Answer 8

The простым способом в Мое мнение таково:

1. Получить http://www.quirksmode.org/js/detect.html

2. Используйте этот код:

   if (BrowserDetect.browser == "Chrome") { 
       jQuery('form').attr('autocomplete','off'); 
   }; 
   

Answer 9

input:focus { outline:none; } 

Это работало отлично подходит для меня, но больше, чем, вероятно, чтобы держать вещи форму на вашем сайте ваш будет хотеть также включать это в ваш CSS для текстовых полей:

textarea:focus { outline:none; } 

Также это может показаться для большинства, но для новички вы можете также установить его в цвет как таковой:

input:focus { outline:#HEXCOD SOLID 2px ; } 

Answer 10

Это кусок пирога с JQuery:

if ($.browser.webkit) { 
    $("input").attr('autocomplete','off'); 
} 

Или, если вы хотите быть немного более избирательным, добавить имя класса селектор.

Answer 11

После применения @Benjamin его решения я обнаружил, что нажатие кнопки «Назад» все равно даст мне желтую подсветку.

Моего решения какие-то образом предотвратить этот желтый блик вернуться есть с применением следующей JQuery JavaScript:

<script type="text/javascript"> 
    $(function() { 
     if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) { 
     var intervalId = 0; 
      $(window).load(function() { 
       intervalId = setInterval(function() { // << somehow this does the trick! 
        if ($('input:-webkit-autofill').length > 0) { 
         clearInterval(intervalId); 
         $('input:-webkit-autofill').each(function() { 
          var text = $(this).val(); 
          var name = $(this).attr('name'); 
          $(this).after(this.outerHTML).remove(); 
          $('input[name=' + name + ']').val(text); 
         }); 
        } 
       }, 1); 
      }); 
     } 
    }); 
</script> 

Надеется, что это помогает любому !!

Answer 12

Это работает. Лучше всего, вы можете использовать значения rgba (с помощью rgba не работает ручка вставки в рамке-тени). Это небольшая подсказка от ответа Бенджамина. Я использую $ (document) .ready() вместо $ (window) .load(). Мне кажется, что мне лучше работать - сейчас гораздо меньше FOUC. Я не верю, что есть и недостатки использования $ (document) .ready().

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) { 
    $(document).ready(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); 
     }); 
    }); 
}; 

Answer 13

это именно то, что вы ищете!

// Just change "red" to any color 
input:-webkit-autofill { 
    -webkit-box-shadow: 0 0 0px 1000px red inset; 
} 

Answer 14

ЛУЧШЕЕ РЕШЕНИЕ ПОКА (в LESS)

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

    &:hover, 
    &:focus { 
     box-shadow: 0 0 0 1000px white inset; 
    } 
} 

Answer 15

для современных версий, Это тоже работает, если находится в одном из двух входов для входа. Также исправьте версию 40+ и позднюю версию Firefox.

<input readonly="readonly" onfocus="this.removeAttribute('readonly');" />