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


151

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

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

Итак, чтобы избежать этой проблемы, есть ли более простой способ остановить Chrome от перекрашивания полей ввода?

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

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


1
это не просто проблема в Chrome. Панель инструментов Google для других браузеров делает то же самое «пожелтение» полей ввода.
Карлтон Дженке

2
Я предоставил вам ответ, который работает ниже.
Джон Лейдгрен

8
Я не понимаю, почему все говорят о контуре: нет, вопрос о желтом фоне, а не об контуре. А атрибут autocomplete, для которого установлено значение off, НЕ будет исправлять проблему, поскольку davebug сказал, что он хочет, чтобы автозаполнение работало, а не на желтом фоне.

Ответы:


74

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

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

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

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

<form autocomplete="off" ...>

«Я собираюсь проверить возможность отключения атрибута автозаполнения, если / когда возникает ошибка, но это сложная часть кода, чтобы программно отключить автозаполнение для одного введенного на странице ввода».
Дэйв Ратледж,

Хех ... да, спасибо, хотя, полагаю, мне все еще нужно проверить Chrome, верно?
Дэйв Ратледж,

2
для людей использующих рельсы простой формы<%= simple_form_for @user, html: { autocomplete: 'off' } do |f| %>
carbonr

извините за то, что это не помогло мне
М.Ислам

136

Установите свойство CSS outline в none.

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

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

:focus { background-color: #fff; }

9
Задний план? Я не знал, что Chrome также добавил цвет фона? Если это так, это может быть исправлено чем-то вроде:focus { background-color: #fff; }
Джон Лейдгрен

Уничтожение контура с помощью CSS может предотвратить пожелтение, но не предотвратит фактическое автозаполнение. Если вы хотите сделать это, важно использовать атрибут автозаполнения, нестандартный или нет.
Том Бутелл

2
@pestaa правильно, это не правильный ответ, но он, безусловно, решает аналогичную проблему
Дэвид Лоусон

Будьте осторожны при работе с планшетами и прочим, стандартный браузер Android немного сложен в использовании без контура. Впрочем, достаточно легко применить для не мобильных браузеров :)
Тим Пост

Небольшое улучшение: input[type=text], input[type=password], input[type=email], textarea, select { outline: none; }
Фелипе Лима

56

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

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

это отличный хак. Спасибо
Джейсон

Я бы тоже добавил к этому внимание: Dinput:-webkit-autofill, input:focus:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #FFF inset; }
StephanieQ

привет @JStormThaKid, я использовал это ..., но не работал для правильных входных данных ... пожалуйста, ответьте на это ...
Mithu

Спасибо за ответ на вопрос, который он на самом деле задал! Я почти начал терять надежду.
BVernon

Лучший ответ здесь, я все еще хотел автозаполнение Google, так что спасибо
Spangle

14

Используя немного 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);
    });
});}

Спасибо за подсказку! Однако после публикации формы, нажав кнопку «Назад», желтая подсветка вернулась. Я расширил ваш фрагмент (см. Мой ответ), чтобы покрыть это.
321X

+1 @ Бенджамин - отличное решение, оно немного мигает желтым, но в конце исправляется;)
его

7

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

*:focus { outline:none; }

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

.nohighlight:focus { outline:none; }

Вы также можете изменить границу по своему желанию:

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

(От Билла Бекельмана: Переопределить автоматическую рамку Chrome вокруг активных полей с помощью CSS )


2

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


1

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

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

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



1

После применения @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>

Надеюсь, это кому-нибудь поможет !!


1

Это работает. Лучше всего, вы можете использовать значения rgba (хак box-shadow inset не работает с 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);
        });
    });
};

1

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

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

0
input:focus { outline:none; }

Это отлично сработало для меня, но, скорее всего, вы сохраните единообразие на своем сайте, и вы захотите включить это в свой CSS для textareas:

textarea:focus { outline:none; }

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

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

-1

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.