HTML5 Search Input: No Background Image in Chrome

Change Input background to transparent on autocomplete form

Finally i get the result with this piece of code:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: #fff !important;
}

Remove background arrow from date input in Google Chrome v20

As far as I know you can't disable it at the moment.
There is a discussion going on here:
https://plus.google.com/102860501900098846931/posts/hTcMLVNKnec

Perhaps they will add some -webkit selectors to control the styling.

For now you might have to use <input type="text"> instead.

EDIT:

As per Jeremy's answer, it is now possible to remove the arrow and spin buttons. Details can be found on webkit.org: Styling Form Controls - WebKit

The CSS to hide the controls is:

<input type="date" class="unstyled" />

.unstyled::-webkit-inner-spin-button,
.unstyled::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

However, this will only hide and not disable the native calendar! - you can still activate the calendar by pressing Alt+Down Arrow (at least on Windows).

To disable, you need to add a little JavaScript as described on the above webkit.org page:

<input type="date" id="dateInput" class="unstyled" />

dateInput.addEventListener('keydown', function(event) {
    if (event.keyIdentifier == "Down") {
        event.preventDefault()
    }
}, false);

You can see it working in this jsfiddle.

Chrome Autofill CSS + Background Image

use -webkit-background-clip:text; to remove chrome autofill effect

add input to transparent and set wrapper to add background image

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
     -webkit-background-clip: text;
}

/* This is for testing purposes */
input, .input-wrapper {
    background-color: #eee !important;
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, .4) 25%, rgba(255, 255, 255, .0) 25%, rgba(255, 255, 255, .0) 50%, rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, .4) 75%, rgba(255, 255, 255, .0) 75%, rgba(255, 255, 255, .0)) !important;
      background-size: 32px 32px !important;
      background-repeat: repeat !important;
    transition: background-position 60000s linear !important;
      background-position: 4000000px !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<form action="/">
  <div class="form-group">
    <div class="input-wrapper">
      <input type="text" class="form-control input-lg" id="exampleInputFirst" placeholder="First Name">
    </div>
  </div>
  <div class="form-group">
    <div class="input-wrapper">
    <input type="text" class="form-control input-lg" id="exampleInputLast" placeholder="Last Name">
    </div>
  </div>
  <div class="form-group">
    <div class="input-wrapper">
    <input type="email" class="form-control input-lg my-input" id="exampleInputEmail" placeholder="Email">
    </div>
  </div>
 
  <button type="submit" class="btn btn-primary btn-lg btn-block">Submit</button>
</form>