title: How do I remove the arrow inside a text input in Google Chrome?
body: <p><a href="https://i.stack.imgur.com/dEanp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dEanp.png" alt="Example text input with arrow"></a>
  How do I remove the arrow on the right from showing up during hover    and focus events in Google Chrome?</p>
  
  <pre><code> input[type="text"]:focus{
        -moz-appearance: textfield;
      }
  </code></pre>
  
  <p>has worked for Firefox. I can't seem to find a working solution for Chrome.</p>
  
  <pre><code>    input[type="text"]:focus{
        -webkit-appearance: none;
      }
  </code></pre>
  
  <p>has not worked in Chrome 81.0.4044.129</p>
  
  <p>Here's the relevant html portion (test.html):</p>
  
  <pre><code> &lt;!DOCTYPE html&gt;
      &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
          &lt;title&gt;Document&lt;/title&gt;
          &lt;link rel="stylesheet" type="text/css" href="test.css"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="search-by-player-container"&gt;
              &lt;input type="text" list="player-list-input" id="player-input-name" name="player-choice" /&gt;
              &lt;datalist id="player-list-input"&gt;&lt;/datalist&gt;
            &lt;/div&gt;
            &lt;script src="Scripts/loadPlayerNames.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>Here's the relevant css code (test.css):</p>
  
  <pre><code>    input[type="text"]:focus{
          -moz-appearance: textfield;
          margin:0;
        }
  
        input[type="text"]:focus{
          -webkit-appearance: none;
          margin:0;
        }
  </code></pre>
  
  <p>Here's the relevant js file (Scripts/loadPlayerNames.js):</p>
  
  <pre><code>    var input = document.getElementById("player-input-name");
      var dataList = document.getElementById("player-list-input");
      // Create a new XMLHttpRequest.
      var request = new XMLHttpRequest();
  
      // Handle state changes for the request.
      request.onreadystatechange = function(response) {
        if (request.readyState === 4) {
          if (request.status === 200) {
            // Parse the JSON
            var jsonOptions = JSON.parse(request.responseText);
  
            // Loop over the JSON array.
            jsonOptions.forEach(function(item) {
              // Create a new &lt;option&gt; element.
              var option = document.createElement('option');
              // Set the value using the item in the JSON array.
              option.value = item.name;
              // Add the &lt;option&gt; element to the &lt;datalist&gt;.
              dataList.appendChild(option);
            });
  
            // Update the placeholder text.
            input.placeholder = "player first &amp; last name";
  
          } else {
            // An error occured :(
            input.placeholder = "Couldn't load datalist options :(";
          }
        }
      };
  
      // Update the placeholder text.
      input.placeholder = "Loading options...";
  
      // Set up and make the request.
      request.open('GET', '../Scraping/player_list.json', true);
      request.send();
  
      // START THE page with the focus on the player-input-name
      document.getElementById("player-input-name").focus();
  </code></pre>
  
  <p>Here's a portion of Scraping/player_list.json:</p>
  
  <pre><code>  [
    {
      "name": "Isaako Aaitui",
      "url": "/A/AaitIs00.htm",
      "position": "NT",
      "hall of fame": false,
      "first year": 2013,
      "last year": 2014,
      "active": false
    },
    {
      "name": "Joe Abbey",
      "url": "/A/AbbeJo20.htm",
      "position": "E",
      "hall of fame": false,
      "first year": 1948,
      "last year": 1949,
      "active": false
    },
    {
      "name": "Fay Abbott",
      "url": "/A/AbboFa20.htm",
      "position": "BB-FB-TB-QB-WB-E",
      "hall of fame": false,
      "first year": 1921,
      "last year": 1929,
      "active": false
    },
    {
      "name": "Tony Zuzzio",
      "url": "/Z/ZuzzTo20.htm",
      "position": "G",
      "hall of fame": false,
      "first year": 1942,
      "last year": 1942,
      "active": false
    },
    {
      "name": "Brandon Zylstra",
      "url": "/Z/ZylsBr00.htm",
      "position": "WR",
      "hall of fame": false,
      "first year": 2018,
      "last year": 2019,
      "active": true
    },
    {
      "name": "Jim Zyntell",
      "url": "/Z/ZyntJi20.htm",
      "position": "G",
      "hall of fame": false,
      "first year": 1933,
      "last year": 1935,
      "active": false
    }
  ]
  </code></pre>