使用列表/数据列表输入：删除 Chrome 版本 91 中的下拉箭头

Question

我有以下 Razor/HTML 代码来生成带有列表/数据列表的输入字段：

@Html.EditorFor(model => model.BarcodeField.Value, new { htmlAttributes = new { @class = "form-control inputBarcodeField", @name = "edtBarcodeField", @id = "edtBarcodeField", @maxlength = "10", @list = "lastScannedBarcodes" } })
<datalist id="lastScannedBarcodes"></datalist>

生成的 HTML 如下所示：

    <input class="form-control inputBarcodeField text-box single-line valid focus" id="edtBarcodeField" list="lastScannedBarcodes" maxlength="10" name="BarcodeField.Value" type="text" value="">
    <datalist id="lastScannedBarcodes"><option value="9900000000"></option></datalist>

默认情况下，一旦数据列表充满了选项，Chrome 就会在输入框中放置一个箭头。在 Chrome 90 及更低版本中，我可以使用以下 CSS 隐藏此箭头：

/* this is to hide the ugly dropdown arrow for the last scanned barcodes */
.inputBarcodeField::-webkit-calendar-picker-indicator {
    display: none;
}

但自从 Google 发布 Chrome 91 版后，用户抱怨箭头又回来了。我可以确认一下。

Chrome 90（好的！）：

Chrome 91（不好的）：

如何在 Chrome 91 中移除此箭头？

Answer 1

尝试使用!important：

.inputBarcodeField::-webkit-calendar-picker-indicator {
  display:none !important;
}

<input class="form-control inputFieldGrading inputBarcodeField text-box single-line valid focus" id="edtBarcodeField" list="lastScannedBarcodes" maxlength="10" name="BarcodeField.Value" type="text" value="">
    <datalist id="lastScannedBarcodes"><option value="9900000000"></option></datalist>