preface

This problem is a platitude, but I have not found a good way to deal with it before, this time mainly to illustrate several ways I have seen.

The problem

I need to auto-fill in the input as shown, but I don’t want Chrome’s yellow background

handling

  1. After the search, the item that came up most frequently:

    Method one:

    Overlay the yellow background with the box-shadow property

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

    What’s the problem after that?

    Actually yellow is not eliminated, just covered with other colors.

    For example, the code above is covered with white, not translucent effect.

  2. Method 2

    Use double input for overwriting

    I have tried this approach

    <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"
>
Copy the code

    The essence of this is to use a non-auto-populated input for display, with an auto-populated input hidden behind it, so that the display does not have a yellow background

    I’m having a bit of a problem with this method. What if the auto-fill screen that triggers hidden input is activated when the user clicks on show input?

    I have tried. Focus ().click()

    So you want to try using the simulated user to enter a character and then delete it to set up the auto-fill page.

  3. Methods three

    The yellow background is essentially the result of this string of 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;
}
Copy the code

    The solution is to remove the background

    Use the background-clip attribute for processing

    Select content-Box for the background fill box(for more background-clip fill values, see MDN for box model)

    By changing height to 0, the content-box height is set to 0, and the yellow background disappears

    Note: You cannot change width to 0 at the same time, as this will cause the content to disappear

    <! -- Attach the code of the first image effect -->
    <input
      type="username"
      placeholder="Username"
      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>
Copy the code

For your first post, please advise crab crab ٩(‘ω’)و