title: Hi, is there any way of getting rid of the autocomplete background when my webpage has loaded my saved login credentials?
body: <p>If i delete the login credentials, the colour of the field is fine. it turns back to the grey colour that you can see in the image i've provided. However when reloading the page the light blue colour appears, which as you can see doesn't look very appealing. I've tried to find a solution on YouTube and i cant seem to find anything.</p>
  <p>Does anyone have a solution for this?</p>
  <p><a href="https://i.stack.imgur.com/qviwX.png" rel="nofollow noreferrer">image of my field</a></p>
  <p>HTML code:</p>
  <pre><code>    &lt;form method=&quot;POST&quot; autocomplete=&quot;off&quot; action=&quot;&quot; name=&quot;form&quot; &gt;
            {% csrf_token %}
  
          &lt;div class=&quot;wrapper&quot;&gt;
              &lt;h1&gt;Login&lt;/h1&gt;
             
              &lt;div class=&quot;form&quot;  &gt;
                  &lt;div class=&quot;user_input&quot; style=&quot;padding-top:10px ;&quot;&gt;
                      &lt;input type=&quot;text&quot; name=&quot;username&quot; placeholder=&quot;Username&quot; class=&quot;form-control&quot; style=&quot;border: none; background-color:#e9e9e9; height: 40px; padding:10px;&quot;&gt;
                      
                  &lt;/div&gt;
                  &lt;div class=&quot;user_input&quot;style=&quot;padding-top:10px;&quot; &gt;
                      &lt;input type=&quot;password&quot; name=&quot;password&quot; placeholder=&quot;Password&quot; class=&quot;form-control&quot; style=&quot;border: none; background-color:#e9e9e9; height: 40px; padding:10px;&quot;&gt;        
                  &lt;/div&gt;  
                 
                  &lt;div class=&quot;button&quot; &gt;
                      &lt;button type=&quot;submit&quot; style=&quot;width: 130px; height: 40px; border-radius: 8px; color: white; background-color:#0088a9; border: none;&quot; &gt;Login&lt;/button&gt;
                  &lt;/div&gt;
                  {% for message in messages %}
                      &lt;p id=&quot;messages&quot; style=&quot;text-align: center; margin-top: 20px;&quot;&gt;{{message}}&lt;/p&gt;
                  {% endfor %}
  
                  &lt;div class=&quot;loginbtn&quot;&gt;
                      &lt;p style=&quot;margin-top: 20px; text-align: center; color: black;&quot;&gt;Don't have an account?&lt;br&gt; click here to &lt;a href=&quot;{% url 'register' %}&quot;&gt;Sign up&lt;/a&gt; &lt;/p&gt;
                     
                  &lt;/div&gt;             
            
              &lt;/div&gt;    
          
          &lt;/div&gt;
  
      &lt;/form&gt;
  </code></pre>
  <p>CSS code:</p>
  <pre><code>*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  text-decoration: none;
  font-family: 'Raleway', sans-serif;
  }
  
  .wrapper{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  max-width: 350px;
  width:100%;
  height: auto;
  background:#fff ;
  padding:50px 45px;
  border-radius: 15px
  
  }
  
  .wrapper h1{
  margin-bottom: 25px;
  text-align: center;
  font-size: 35px;
  font-weight: bold;
  color: rgb(0, 0, 0);
  
  }
  .wrapper .form .user_input{
  width: 100%;
  position: relative;
  margin-bottom: 10px;
  background: #e9e9e9;
  padding: 4px 8px;
  padding-top: 9px;
  text-decoration: none;
  border: none;
  
  }
  .wrapper .form .button{
  margin:30px auto 0;    
  margin-left: 64px;
  }
  </code></pre>