Как удалить границу и фон ввода в поле ms

Ответ 1

Из ответов, приведенных в этот похожий вопрос на SO, и, как вы подозревали, список автозаполнения, который появляется под текстовым полем, выходит из DOM и поэтому не может ориентироваться на CSS.

Из моих экспериментов по codepen кажется, что Edge накладывает полупрозрачный элемент поверх текстового поля (согласованный как по высоте, так и по ширине), а не по стилю, который применяется к самому текстовому поле.

Моя первая демо-версия кодефа показывает, что происходит с стилем при выключении автозаполнения. Вы увидите, что, цепляя псевдоклассы :hover и :focus, я могу создать другой стиль при наведении курсора на текстовое поле, которое уже находится в фокусе (синий, когда он находится в фокусе, красный при падении над тем же текстовым полем, когда он находится в фокус).

Это стоит отметить при просмотре моей второй демо на codepen (в Edge, очевидно), которая включена автозаполнением. Когда вы нажимаете на текстовое поле, цвет фона красный (как и ожидалось - я наводил курсор на текстовое поле, которое находится в фокусе). Однако слегка двигайте мышью, и фон меняется на синий, указывая на то, что текстовое поле активно, но больше не зависнет. Это неверно - мы все еще нависаем над ним.

Это может быть причуда с Edge или ошибка, связанная с тем, как браузер обрабатывает автозаполнение. Это может стоить подняться с Microsoft - похоже, ничего не говорится об этом в трекер ошибок.

Один из ответов, приведенных в первой ссылке I, предлагает использовать jQueryUI реализацию автозаполнения. Это немного странно, когда браузер должен делать это по умолчанию, но вы сможете настроить талисман списка автозаполнения и, теоретически, избегать проблем, которые у вас есть.

Ответ 2

Вы должны добавить autocomplete="off" в поле input

<input type="text" placeholder="Type here" autocomplete="off">

И

Если это динамический элемент или вы не можете добавить его в свой input, тогда вы можете сделать это с помощью простого script

$('input').attr('autocomplete','off');

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

Ответ 3

Лучше отключить autocomplete

<input type="text" placeholder="Type here" autocomplete="off">

Ответ 4

Я не тестировал его, у меня нет доступа к IE прямо сейчас, но в других браузерах некоторые поведения по умолчанию могут быть обновлены с использованием некоторого CSS. Надеюсь, это поможет вам:

appearance: none;
-webkit-appearance: none;
-moz-appearance: none;