title: Remove Datalist Dropdown Arrow in Chrome
body: <p>Chrome has apparently added a dropdown arrow to text inputs that reference a <code>&lt;datalist&gt;</code>. It's appearing in Chrome 34 (Canary) but not in the current stable build (Chrome 31).</p>
  
  <p>It appears only when the text field is focused (see update) and is applied to both input types <code>text</code> and <code>search</code>.</p>
  
  <p>It could be worse as far as native browser implementations go, but as you can see in the image, it conflicts with my design specs.</p>
  
  <p><img src="https://i.stack.imgur.com/fAU2Z.png" alt="enter image description here"></p>
  
  <p>Does anyone know how to remove or replace this new feature?</p>
  
  <pre><code>&lt;datalist id="list"&gt;&lt;option value="foo"&gt;&lt;option value="bar"&gt;&lt;/datalist&gt;
  &lt;input type="text" list="list" name="field" maxlength="50" autocomplete="off" spellcheck="off" placeholder="Jump To"&gt;
  </code></pre>
  
  <p><strong>Update:</strong></p>
  
  <p>The arrow also appears when the field is hovered (not just focused) and unfortunately also has its own background color when the button itself is hovered:</p>
  
  <p><img src="https://i.stack.imgur.com/EmJv4.png" alt="enter image description here"></p>