Как избавиться от раздражающего желтого фона автозаполнения Chrome

CSS

предисловие

Эта проблема является банальной, но я не нашел хорошего способа справиться с ней раньше.На этот раз я в основном объясню несколько способов решения этой проблемы, которые я видел.

вопрос

мне нужна картинкаinputАвтозаполнение выполняется в Chrome, но мне не нужен желтый фон Chrome.

Как обращаться

  1. После поиска появляется тот, у которого самая высокая частота:

    метод первый:

    использоватьbox-shadowАтрибут имеет приоритет над желтым фоном

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

    В чем проблема после обработки?

    На самом деле желтый цвет не убирается, он просто закрашивается другими цветами.

    Например, в приведенном выше коде он покрыт белым цветом, и эффект полупрозрачности не может быть достигнут.

  2. Способ второй

    использовать двойной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()недействительны

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

  3. Способ третий

    Желтый фон по сути является такой строкой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>
    

Это мой первый пост, посоветуйте краба ٩('ω')و