предисловие
Эта проблема является банальной, но я не нашел хорошего способа справиться с ней раньше.На этот раз я в основном объясню несколько способов решения этой проблемы, которые я видел.
вопрос
мне нужна картинкаinput
Автозаполнение выполняется в Chrome, но мне не нужен желтый фон Chrome.
Как обращаться
-
После поиска появляется тот, у которого самая высокая частота:
метод первый:
использовать
box-shadow
Атрибут имеет приоритет над желтым фономinput { box-shadow: 0 0 0px 1000px white inset }
В чем проблема после обработки?
На самом деле желтый цвет не убирается, он просто закрашивается другими цветами.
Например, в приведенном выше коде он покрыт белым цветом, и эффект полупрозрачности не может быть достигнут.
-
Способ второй
использовать двойной
input
покрыватья тоже так пробовал
<form autocomplete="off"> <input :type="newType" :placeholder="placeholder" :name="name+'-show'" class="input-autocomplete-show" autocomplete="off" @focus="getFocus" ></form> <input :type="newType" :placeholder="placeholder" :name="name" ref="valueInput" class="input-autocomplete-value" >
Суть его в том, чтобы использовать неавтозаполнение
input
Предназначен для отображения, затем используйте автозаполнениеinput
скрыт за ним, чтобы он мог отображаться без желтого фонаУ меня есть небольшие проблемы с этим методом, когда пользователь нажимает
显示input
, если это сработает隐藏input
Интерфейс автозаполнения активирован?я пытался
.focus() .click()
недействительныИтак, я хочу попробовать использовать смоделированного пользователя для ввода символа, а затем удалить его, чтобы открыть страницу автозаполнения (не пробовал).
-
Способ третий
Желтый фон по сути является такой строкой
CSS
вызванныйinput:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { background-color: rgb(250, 255, 189) !important; background-image: none !important; color: rgb(0, 0, 0) !important; }
Решение - убрать фон
использовать
background-clip
свойства для обработкиВыберите поле заливки для фона, как
content-box
(больше оbackground-clip
значение заполнения, блочная модель, см.MDN)опять таки
height
база выращивания0
, вы можете поставитьcontent-box
Высота установлена на 0, поэтому желтый фон исчезаетПримечание: здесь нельзя комбинировать одновременно
width
база выращивания0
, приведет к исчезновению содержимого<!-- 附上第一幅图片效果的代码 --> <input type="username" placeholder="用户名" id="username" name="username" class="login-input" > <style> .login-input { background: transparent content-box; box-sizing: border-box; width: 90%; height: 0; padding: 15px 5%; outline: none; border: none; border-bottom: 1px solid #333; margin-bottom: 20px; } </style>
Это мой первый пост, посоветуйте краба ٩('ω')و