Как убрать стрелку внутри текстового ввода в Google Chrome? - PullRequest
Новая
       54

Как убрать стрелку внутри текстового ввода в Google Chrome?

0 голосов
/ 03 мая 2020

Example text input with arrow Как убрать стрелку справа от показа во время событий наведения и фокусировки в Google Chrome? 

 input[type="text"]:focus{
      -moz-appearance: textfield;
    }

сработало для Firefox , Я не могу найти рабочее решение для Chrome. 

    input[type="text"]:focus{
      -webkit-appearance: none;
    }

не работает в Chrome 81.0.4044.129

Вот соответствующая часть html (тест. html): 

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" type="text/css" href="test.css">
    </head>
    <body>
        <div id="search-by-player-container">
            <input type="text" list="player-list-input" id="player-input-name" name="player-choice" />
            <datalist id="player-list-input"></datalist>
          </div>
          <script src="Scripts/loadPlayerNames.js"></script>
    </body>
    </html>

Вот соответствующий код css (тест. css): 

    input[type="text"]:focus{
        -moz-appearance: textfield;
        margin:0;
      }

      input[type="text"]:focus{
        -webkit-appearance: none;
        margin:0;
      }

Вот соответствующий файл js (Scripts / loadPlayerNames. js): 

    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 <option> element.
            var option = document.createElement('option');
            // Set the value using the item in the JSON array.
            option.value = item.name;
            // Add the <option> element to the <datalist>.
            dataList.appendChild(option);
          });

          // Update the placeholder text.
          input.placeholder = "player first & 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();

Вот часть Scraping / player_list. json: 

  [
  {
    "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
  }
]
...